logo标签列表

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

cssnested-listscss-selectors
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仍然选择了子菜单点，我不知道为什么。
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 的第一个直接后代是锚点。

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>
这将使得在<li>和子<ul>之间的所有<a>标签都加粗。我认为他只想让第一个变粗。 - ediblecode
每种情况下只有一个标签... 100% 的 1 就是 1。 - Martin Milan
但他说他只想针对其中的第一个进行目标定位。现在它可能只有一个链接，如果那是一个例子呢？ - ediblecode
+1 用于发现未关闭的 Div。至于其他方面，看看他是如何构建菜单的。扩展菜单上只会有1个项目... - Martin Milan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接