爲什麼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選擇器選擇這些元素？

回答

相關問題