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是锚点。

Answer 2

试试这个：

<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>

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

2 个答案: