Question

我有一个用HTML构建的非常基本的菜单结构....

<ul id="menu-navigation">
    <li id="menu-item-1">
        Menu Item 1
    </li>
    <li id="menu-item-2" class="current-menu-item">
        <a href="#">Menu Item 2</a>
        <ul class="sub-menu">
            <li class="sub-1"><a href="#">Sub-menu Item 1</a></li>
            <li class="sub-2"><a href="#">Sub-menu Item 2</a></li>
            <li class="sub-3"><a href="#">Sub-menu Item 3</a></li>
        </ul>
    </li>
    <li id="menu-item-3">
        Menu Item 3
    </li>
    <li id="menu-item-4">
        Menu Item 4
    </li>
</ul>

我试图使用...

来定位名为菜单项2的标签

#menu-navigation .current-menu-item a{background:blue;}

但这也将子菜单中的所有链接也变为蓝色。我怎样才能定位第一个标签？

Answer 1

#menu-navigation .current-menu-item > a {
    background:blue;
}

看看： http://css-tricks.com/child-and-sibling-selectors/

Answer 2

使用child selector：

#menu-navigation .current-menu-item > a {
    background: blue;
}

更改标签的背景颜色

2 个答案: