CSS选择第二个后代

Question

我正在使用Chrome调试工具来查找页面上的元素。我无法理解逻辑。 HTML看起来像这样

这是我的第一个解决方案

这是一个菜单，我试图在其中选择“注销”的第二个链接。但是它不能将“ a”识别为“ div”的后代。

但是当我选择它时，它是“ div”的后代元素的子元素，它会找到它

有人可以解释为什么我在做第一张照片时找不到它

Answer 1

a:nth-child(2)匹配一个<a>元素，该元素是其直接父级的第二个子级。但是每个<li>只有一个孩子，再也没有第二个孩子。是拥有多个<ul>子元素的<li>元素，因此您需要在:nth-child上放置li修饰符，然后在其中选择<a>。< / p>

Answer 2

:nth-child()伪类仅选择作为其直接父级的第n个子级的元素，不适用于任意高级祖先。

它在您的第一个解决方案中不起作用的原因是，每个a是其父级（li）的 first 子级。由于每个a是第一个孩子，因此:nth-child(2)将不会选择任何a。

它在您的第二个解决方案中起作用的原因是因为您正在选择第二个li。 li的父级是ul，并且ul中有两个li元素，因此li:nth-child(2)能够找到第二个li。

Answer 3

基于MDN网络文档

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

  

：nth-​​child（）CSS伪类根据元素在一组同级中的位置来匹配元素。

很明显，<a>不是彼此的兄弟姐妹，因此您的选择器在第一张图像上不正确。

尽管您的第二个选择器是正确的，因为<li>是兄弟姐妹。