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

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个孩子(如果第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).