元素从父元素继承样式，即使在其他情况下明确定义答案

【问题标题】：Element inheriting style from parent, even when explicitly defined otherwise元素从父元素继承样式，即使在其他情况下明确定义
【发布时间】：2014-09-05 20:03:27
【问题描述】：

我有一个两层导航菜单。使用 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;
}

【问题讨论】：

menuitem 不受大多数浏览器的支持。
它可以很容易地成为div 标签，我只针对一个浏览器。是menuitem 是什么导致了问题？如果是这样的话，它不会无法设置主导航的样式吗？
不知道...但是，它没有在正确的上下文中使用，请参阅：w3.org/html/wg/drafts/html/master/…
@Paulie_D：谢谢，我会解决的。

标签： html css css-selectors pseudo-class

【解决方案1】：

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

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

【讨论】：

这行得通，也解决了我在飞出时遇到的问题。谢谢。