Question

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

简而言之：为什么我的nav.sub_navigation menuitem a选择器没有像我预期的那样被应用？

这是我的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规则。< / p>

元素从父级继承样式，即使在另外明确定义时也是如此

1 个答案: