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

【问题标题】：Why is my nth-child selector selecting the wrong element?为什么我的第 n 个子选择器选择了错误的元素？
【发布时间】：2015-10-16 02:01:41
【问题描述】：

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

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

为什么会这样？

【问题讨论】：

尝试将class 或id 添加到div
nth-child(1) 是否返回 noscript div？
不，我不这么认为，因为你的无脚本在你的 div 之上。
预期结果是什么？选择哪个div 尝试？ div 关注 div#custom-header ?
为什么不寻找 $('body > div:nth-child(1)') ？

标签： javascript jquery html css-selectors noscript

【解决方案1】：

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

来自 jQuery docs:

:nth-child(n) 伪类很容易与:eq(n) 混淆，尽管两者会导致匹配的元素截然不同。使用:nth-child(n)，所有子元素都被计算在内，无论它们是什么，并且仅当指定的元素与附加到伪类的选择器匹配时才会被选中。使用:eq(n)，仅计算附加到伪类的选择器，不限于任何其他元素的子元素，并且选择第 (n+1) 个（n 从 0 开始）。

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

【讨论】：

jQuery 不能选择noscript 元素的子元素吗？
@guest271314：当然是，body > noscript > div 或 body div。不适用于body > div，因为div 是body 的孙子，而不是孩子，所以它不会出现在“直系后代”> 运算符中。
“当然是，body > noscript > div” 有趣的是，noscript 的子节点出现设置为文本节点，而不是 div 元素 jsfiddle.net/52grpf7L/3

【解决方案2】：

见this post

[步骤 1]

:nth-child()

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

jQuery 对 :nth-child(n) 的实现严格源自 CSS 规范

W3C 规范 here

:nth-child(an+b) 伪类表示法表示具有 an+b文档树中它之前的-1个兄弟姐妹

所以这里:nth-child(4) 呈现完整形式:nth-child(0n+4)，并表示一个元素在文档树中正好有3 个兄弟姐妹

noscript 标签

见this post

如果启用 javascript，<noscript> 标签可能不会被渲染，但仍然可以使用 nextSibling 或 prevSibling 访问，因此它与 nth-child 一起计数

[步骤 2]

body > div 与 :nth-child 组合，就像其他 pseudo-classes 一样，例如a:hover和tr:hover，:hover不关心是a还是tr标签，只是一个特殊选择器

[整个事情]

body>div:nth-child(4) 首先选择body>div，然后选择之前正好有3个兄弟的div，所以<noscript>标签计数。

【讨论】：

【解决方案3】：

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

【讨论】：

这是一个简单的解决方案；当编号与他的预期不一致时（很明显），OP 没有询问如何选择 div，但 为什么 编号与他预期的不符。
@Arqetech 提问者知道这一点，并且知道向选择器添加 +1 会起作用。但这不是他要问的。