为什么第 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 个子元素。

标签： html css css-selectors

【解决方案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 同样的事情，但我的解释更容易可视化和计算（个人）
其实是这样，从来没想过。感谢您提供不同的观点。