5

我有这个代码：

<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 示例

4

3 回答 3

9 
* > 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 '>' 选择器；它是什么？

于 2013-07-29T11:51:26.470 回答
1

项目 2.3 是最内层ol列表中的位置 3 (n=0, 4n+3 = 3)。它也被选中，因为ul li 部分选择器意味着“任何元素内的所有元素 ，无论嵌套级别如何”。并且该部分增加了一个条件：“他们中的那些是他们直系父母的第3、7、11等等孩子”。liulnth-child

于 2013-07-29T12:16:18.607 回答
0

它是相对于父母完成的：

#B= 索引 0

#C= 索引 1

#D= 索引 2

#E= 索引 3

-

4n表示 4 乘以项目的索引

+ 3是，当然，加 3 - 意思是：

-

#B= 索引 0 = 4x0 = 0 + 3 = 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）

于 2013-07-29T11:54:21.627 回答