html - 元素从父元素继承样式，即使以其他方式显式定义也是如此

Question

我有一个两层导航菜单。使用 CSS :hover 类，我隐藏了子导航菜单，直到您将鼠标悬停在适当的父项上。出于某种原因，子导航菜单的文本样式与父导航菜单相同，即使我已经明确添加了其他规则。有人可以解释我做错了什么吗？

简而言之:为什么我的 nav.sub_navigation menuitem a 选择器没有按预期应用？

Here is a JSFiddle .

这是我的 HTML:

<nav id="main_navigation">

    <menuitem><a href="">Articles</a></menuitem>
    <nav class="sub_navigation">
        <menuitem><a href="">All</a></menuitem>
        <menuitem><a href="">Programming</a></menuitem>
        <menuitem><a href="">Security</a></menuitem>
        <menuitem><a href="">Design</a></menuitem>
        <menuitem><a href="">Productivity</a></menuitem>
        <menuitem><a href="">Miscellaneous</a></menuitem>
    </nav>

    <menuitem><a href="">About</a></menuitem>
    <nav class="sub_navigation">
        <menuitem><a href="">Biography</a></menuitem>
        <menuitem><a href="">Freelancing</a></menuitem>
        <menuitem><a href="">Resume</a></menuitem>
        <menuitem><a href="">Contact Information</a></menuitem>
    </nav>

    <menuitem><a href="">Projects</a></menuitem>
    <nav class="sub_navigation">
        <menuitem><a href="">Gallery</a></menuitem>
        <menuitem><a href="">Current Work</a></menuitem>
        <menuitem><a href="">Side Projects</a></menuitem>
        <menuitem><a href="">Github Repositories</a></menuitem>
    </nav>

</nav>

这是我的 CSS:

nav#main_navigation {
    position: relative;
    height: 35px;
    width: 100%;
    background-color: #111;
    text-align: center;
}

nav#main_navigation menuitem a {
    padding: 0 12px;
    color: #a40003;
    font-size: 25px;
    font-family: Comfortaa;
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 3px;
}

nav#main_navigation menuitem a:hover {
    color: #eee;
}

nav.sub_navigation {
    display: none;
    position: absolute;
    width: 100%;
    top: 35px;
    left: 0;
}

nav.sub_navigation menuitem a {
    padding: 0 7px;
    color: black;
    font-size: 14px;
    font-family: Comfortaa;
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 2px;
}

nav.sub_navigation menuitem a:hover {
    color: #003351;
}

/* to show the appropriate sub-navigation */
nav#main_navigation menuitem:hover + nav.sub_navigation {
    display: block;
}

Answer 1

将规则限制在直接底层子项:nav#main_navigation > menuitem > a 和 nav.sub_navigation > menuitem > a

您在 main_navigation 规则中使用了一个 id，这就是它更具体的原因，导致 higher priority并覆盖 sub_navigation 规则。