为什么我的nth-child选择器选择了错误的元素？

Question

我有这个元素树（从Stack Overflow＆＃39; 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是第5个孩子，<noscript>在场，第4个孩子没有。

来自jQuery docs：

  

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

所以，如果你想要第4个div，你会做body > div:eq(3)。

Answer 2

请参阅this post

[步骤1]

<强>：第n个孩子（）

  

选择所有父元素的第n个子元素。

     

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

W3C规范 here

  

：nth-​​child（ a n + b ）伪类表示法表示具有 a n + b <的元素/ em> -1文档树中的兄弟姐妹

所以这里:nth-child(4)显示完整格式:nth-child(0n+4)，并表示元素在文档树中具有完全 3个兄弟姐妹

noscript标记

请参阅this post

如果启用了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个孩子。使用第4个孩子它会在你想要的那个之前选择<div>。