Question

我有这段代码：

<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

Answer 1

* > ul li:nth-child(4n+3)

首先，此选择器开头的* >完全是多余的（它告诉浏览器查找其他内容的ul;其他任何内容。当然，所有{ {1}}元素;如果没有其他内容，它们将位于ul标记内。

所以你可以删除它。这样可以简化工作并更容易解释。

现在我们离开了：

body

选择ul li:nth-child(4n+3)和2.3的原因是因为您的3元素集都来自单个父li元素。使用选择器之间的空格告诉浏览器查找匹配的任何后代;它不关心树在多远的位置寻找匹配的ul元素，因此它会找到两个集合。

要回答关于为什么li不被视为集合中的第七个元素的问题，答案是CSS将每组2.3元素看作一个完全独立的组;即使选择器碰巧匹配原始选择器所做的两组或更多组元素，它仍会为每个元素运行一个单独的计数器，因此li和2.3都被视为其中的第三个元素各自的一套。

如果您只想选择3的 children 元素（即heirarchy中 > ），您需要使用该子元素选择器（ul）而不仅仅是一个空格。

现在只会选择ul > li:nth-child(4n+3)元素的外部集合，因此只会选择您的li元素。

希望有助于解释事情。

顺便说一下，在更一般的说明中，您可能会觉得这很有用：CSS '>' selector; what is it?

Answer 2

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

Answer 3

相对于父母而言：

#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）

为什么第n个子选择器会选择这些元素？

3 个答案: