4

我正在尝试选择嵌套 li 菜单树的第一个锚标记：

<div class="footermenu">
<ul class="menu">
    <li class="expanded first">
        <a href="link.html">First menupoint</a>
        <ul class="menu">
            <li class="first"><a href="#">First submenupoint</a></li>
            <li><a href="#">Second submenupoint</a></li>
            <li><a href="#">Third submenupoint</a></li>
            <li class="last"><a href="#">Fourth submenupoint</a></li>
        </ul>
    </li>
    <li class="expanded last">
        <a href="link.html">Second menupoint</a>
        <ul class="menu">
            <li class="first"><a href="#">First submenupoint</a></li>
            <li><a href="#">Second submenupoint</a></li>
            <li><a href="#">Third submenupoint</a></li>
            <li class="last"><a href="#">Fourth submenupoint</a></li>
        </ul>
    </li>
</ul>

我想要完成的是只选择主菜单点的第一个锚标记。

我的CSS是：

div.footermenu li.expanded a:first-child {
    font-weight: bold;    
}

问题是这个 CSS 仍然选择子菜单点，我不知道为什么。

4

2 回答 2

10

你想用div.footermenu li.expanded > a:first-child

jsFiddle

http://jsfiddle.net/eRTV6/

div.footermenu li.expanded > a:first-child {
    font-weight: bold;    
}

您的原始选择器将选择所有作为 的第一个子元素的锚元素li.expanded，通过添加一个直接后代选择器，>您指定您只想选择第一个直接后代作为li.expanded锚点的元素。

于 2013-07-19T09:33:08.337 回答
4

试试这个：

<html>
<head>
    <style TYPE="text/css">
        div.footermenu li.expanded>a{
            font-weight: bold;
            background: Red;    
        }
    </style>
</head>
<body>
<div class="footermenu">
<ul class="menu">
    <li class="expanded first">
        <a href="link.html">First menupoint</a>
        <ul class="menu">
            <li class="first"><a href="#">First submenupoint</a></li>
            <li><a href="#">Second submenupoint</a></li>
            <li><a href="#">Third submenupoint</a></li>
            <li class="last"><a href="#">Fourth submenupoint</a></li>
        </ul>
    </li>
    <li class="expanded last">
        <a href="link.html">Second menupoint</a>
        <ul class="menu">
            <li class="first"><a href="#">First submenupoint</a></li>
            <li><a href="#">Second submenupoint</a></li>
            <li><a href="#">Third submenupoint</a></li>
            <li class="last"><a href="#">Fourth submenupoint</a></li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>
于 2013-07-19T09:39:24.883 回答