为什么我的第n个子选择器选择了错误的元素？

Question

我有这个元素树（从Stack Overflow的404页中窃取）：

当我们查看它时，突出显示的<div>应该是第四个元素。 但是，执行$('body > div:nth-child(4)')返回之前的div。 为什么会这样呢？ 是否以某种方式在<noscript>标记中选择div？ 当我删除<noscript> ，它会正确选择。

为什么会这样呢？

Answer 1

div:nth-child(4)不给您第4个div ，它给您既是div又是第4个孩子的元素（如果第4个孩子不是div的东西，则什么也不会给您；这就是为什么您没有得到div:nth-child(1)任何东西。 您想要的第4个div是存在<noscript>的第5个孩子，而没有它的第4个孩子。

从jQuery 文档 ：

:nth-child(n)伪类很容易与:eq(n)混淆，即使两者可能导致匹配元素有很大不同。 使用:nth-child(n) ，将计算所有子级，无论它们是什么，并且仅当指定元素与附加到伪类的选择器匹配时才选择指定元素。 使用:eq(n)仅对连接到伪类的选择器进行计数，而不仅限于其他元素的子级，并且选择第（n + 1）个选择器（n从0开始）。

因此，如果需要第4个div ，则将执行body > div:eq(3) 。

Answer 2

看到这篇文章

[第1步]

：nth-​​child（）

选择作为其父项的第n个子项的所有元素。

jQuery的：nth-​​child（n）的实现严格源自CSS规范

W3C规范 在这里

的：第n个孩子（ 正 + b）的伪类表示法表示具有的n + B中的元素-1之前它的兄弟姐妹文档树

因此，这里:nth-child(4)呈现完整形式:nth-child(0n+4) ，并表示元素在文档树中正好具有3个同级元素

Noscript标签

看到这篇文章

如果启用了javascript，则<noscript>标记可能无法呈现，但仍可以使用nextSibling或prevSibling访问，因此它以nth-child计数

[第2步]

body > div与:nth-child组合在一起，就像其他伪类一样 ，例如a:hover和tr:hover ， :hover并不关心它是a还是tr标记，只是一个特殊的选择器

[整个东西]

body>div:nth-child(4)首先选择body>div ，然后选择前有3个兄弟姐妹的div ，因此<noscript>标记计数。

Answer 3

尝试将div:nth-child(4)更改为div:nth-child(5)我已经对其进行了测试，它适用于第5个孩子而不是第4个孩子。 与第四个孩子一起选择它之前的<div> 。