选择列表中的第一个嵌套子项，但不选择子项

Posted 2023-03-06

【中文标题】选择列表中的第一个嵌套子项，但不选择子项

【英文标题】：Select first nested child in list but not subchilds

【发布时间】：2014-11-11 07:01:41

【问题描述】：

我有一个无序列表，例如：

<ul>
    <li>Element one
        <ul>
            <li><a>Element two</a>
                <ul>
                    <li><a>Element three</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

现在如果我尝试选择“元素二”的<a>-元素。我会这样做：

ul ul li:first-child > a

这还将选择以下嵌套的<a> 元素。看到这个小提琴：

http://jsfiddle.net/38ksdpw3/

如何解决？

【问题讨论】：

w3schools.com/Css/css_combinators.asp

【参考方案1】：

您可能需要为第一个 <ul> 元素添加一个标识符，然后通过 parent > child children selector 遍历子树，如下所示：

Example Here

ul.main > li > ul > li:first-child > a 
    background:red;

【讨论】：

@julmot 在这种情况下，.main 标识符充当 起点，它使选择器从 DOM 中的该级别开始以匹配最后所需的元素.

好的，我明白了！问题是在不添加类的情况下，选择器对于嵌套的 a 元素也是正确的。谢谢！

@HashemQolami，如果 ul 是 body 的直接子代，您也可以使用 body > ul > li > ul > li:first-child > a 代替额外的类。或者当列表有父级时，您可以使用：.parentClass > ul > .....

@LinkinTED 绝对。我的意思是有一个标识符来确定第一个<ul>。通过给它一个 ID，通过body > ul 定位它的 Class ro 等。

【参考方案2】：

实际上你不能在这样的结构中区分它。对于这两个链接，您都应用了 ul ul li:first-child > a 而没有特定的父级。所以你应该考虑使用类（至少用于育儿）而不是标签。