如何用CSS选择li的第一个元素？

Question

我正在尝试选择嵌套的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>

我想要完成的是只选择主要menupoints的第一个锚标签.

我的css是:

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

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

Answer 1

你想用 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是锚点.