选择列表中的第一个嵌套子元素，但不包括其子元素。

Question

我有一个无序列表，如下所示：

<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>元素。请参见此fiddle:

http://jsfiddle.net/38ksdpw3/

如何解决这个问题？

- dude

---

https://www.w3schools.com/Css/css_combinators.asp - Andrew

Answer 1

您可能需要向第一个 <ul> 元素添加标识符，然后通过 子代选择器 沿着父元素到子元素的树形结构遍历它们的子节点：

示例在这里

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

- Hashem Qolami

---

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

好的，现在我明白了！问题是如果不添加一个类，选择器也将对嵌套的a元素正确匹配。谢谢！ - dude

@HashemQolami，如果ul是body的直接子元素，你也可以使用body > ul > li > ul > li:first-child > a而不需要额外的类。或者当列表有父元素时，你可以使用：.parentClass > ul > ..... - GreyRoofPigeon

@LinkinTED 当然可以。我的意思是要有一个标识符来确定第一个<ul>。可以通过给它一个ID、Class或者通过body > ul进行定位等方式实现。 - Hashem Qolami

Answer 2

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

- YuS