为啥第 n 个子选择器会选择这些元素？
Posted
技术标签:
【中文标题】为啥第 n 个子选择器会选择这些元素？【英文标题】：Why does the nth-child selector select these elements?为什么第 n 个子选择器会选择这些元素？ 【发布时间】：2013-07-29 04:31:45 【问题描述】：我有这个代码：
<html>
<head>
<style type="text/css">
* > ul li:nth-child(4n+3) color: red;
</style>
</head>
<body>
<ul>
<li id="A" class="u">1</li>
<li>
<ol>
<li id="B" class="u">2.1</li>
<li id="C" class="g">2.2</li>
<li id="D" class="u">2.3</li>
<li id="E" class="g">2.4</li>
</ol>
</li>
<li id="F" class="u">3</li>
</ul>
</body>
</html>
在此它选择2.3 和3，但我不明白这是怎么发生的。
我的想法是：它同时选择相对于父元素位置奇数的两个元素。但是2.3 真的是第 3 位还是第 7 位？我真的卡住了，请帮忙。
JSFiddle Sample
【问题讨论】：
忽略多余的* >，您的选择器意味着：“选择每个li，它是其父元素的4n+3th 子元素，并且是ul 元素的后代”。没有带有第 n 个子选择器的“the”父元素这样的东西。检查页面上的每个元素以查看它是否是相对于 its 父元素的第 n 个子元素。
【参考方案1】：
项目 2.3 是最里面的ol 列表中的位置 3 (n=0, 4n+3 = 3)。之所以选择它，是因为 ul li 部分选择器表示“任何ul 元素内的所有 li 元素，无论嵌套级别如何”。而nth-child 部分又添加了一个条件：“他们中的那些是他们的直系父母的第 3、第 7、第 11 等等孩子”。
【讨论】：
【参考方案2】：* > ul li:nth-child(4n+3)
首先，这个选择器开头的* > 是完全多余的（它告诉浏览器寻找一个ul，它是其他东西的孩子；其他任何东西。当然所有ul 元素都是; 如果不出意外，它们将在body 标签内）。
所以你可以删除它。它会让工作更简单，也更容易解释。
现在我们只剩下这个了：
ul li:nth-child(4n+3)
之所以选择2.3 和3 是因为您的li 元素集都是从单个父元素ul 继承而来的。在选择器之间使用空格告诉浏览器寻找匹配的任何后代；它不关心在树下多远寻找匹配的li 元素，因此它会找到两个集合。
要回答您关于为什么2.3 不被视为集合中的第七个元素的问题，答案是CSS 将每组li 元素视为一个完全独立的组；即使选择器碰巧像您的原始选择器那样匹配了两组或更多组元素，它仍然会为每组运行一个单独的计数器，因此2.3 和3 都被视为各自组中的第三个元素。
如果您只想选择属于ul 的子 元素（即在层次结构中立即 在其下方），则需要使用子选择器（ >) 而不仅仅是一个空格。
ul > li:nth-child(4n+3)
现在这将只选择外部的 li 元素集，因此只会选择您的 3 元素。
希望这有助于解释事情。
顺便说一句，您可能会发现这很有用：CSS '>' selector; what is it?
【讨论】：
【参考方案3】：这是相对于父级完成的：
#B = 索引 0
#C = 索引 1
#D = 索引 2
#E = 索引 3
-
4n 表示 4 乘以项目的索引
+ 3当然是加3——意思是：
-
#B = 索引 0 = 4x0 = 0 + 3 = 3（第三个元素 - 索引 2）
#C = 索引 1 = 4x1 = 4 + 3 = 7（第 7 个元素 - 索引 6）
#D = 索引 2 = 4x2 = 8 + 3 = 11（第 11 个元素 - 索引 10）
#E = 索引 3 = 4x3 = 12 + 3 = 15（第 15 个元素 - 索引 14）
【讨论】：
"4n 表示 4 乘以项目的索引" 不确定这部分。这意味着每 4 个元素。 @Anar 同样的事情，但我的解释更容易可视化和计算（个人） 其实是这样，从来没想过。感谢您提供不同的观点。以上是关于为啥第 n 个子选择器会选择这些元素？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 jQuery UI 的日期选择器会与动态 DOM 发生冲突？