为什么nth-child选择器选择这些元素？

我有这样的代码：为什么nth-child选择器选择这些元素？

<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

来源

2013-07-29 Raed K Hakim

忽略多余的'*>'，你的选择器意味着：“选择每个'li'，它是其父元素的第4n + 3个子元素，并且是'ul'元素的后代。有没有这样的事情，作为“父”元素与nth-child选择器。检查页面上的每个元素以查看它是否是相对于它的父元素的第n个子元素。 –

* > 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?

来源

2013-07-29 11:51:26 Spudley

它的完成相对于父：

#B =指数0

#C =指数1

#D =索引2

#E =指数3

4n装置4乘以该项目的索引

+ 3是，当然，加3 - 这意味着：

#B =索引0 = 4x0 = 0 + 3 = 3（第三元素 - 索引2）

#C =指数1 = 4×1 = 4 + 3 = 7（第七元件 - 索引6）

#D =索引2 = 4×2 = 8 + 3 = 11（第11元件 - 指数10）

#E =指数3 = 4×3 = 12 + 3 = 15（第十五元件 - 指数14）

来源

2013-07-29 11:54:21 SmokeyPHP

“4n表示4乘以项目索引”不确定这部分。它意味着每第四个元素。 –

@同样的事情，但我的解释更容易可视化和计算（个人） – SmokeyPHP

实际上，从来没有这样想过。感谢您的不同观点。 –

项目2.3是位置3（n = 0时，第4n + 3 = 3）在最内ol列表。它也选择了，因为选择的ul li部分是指“任何ul元素内所有li元素，无论嵌套级的”。而nth-child部分又增加了一条：“他们的第三，第七，第十一等子其直系亲属”。

来源

2013-07-29 12:16:18

为什么nth-child选择器选择这些元素？

回答

相关问题