：nth-​​child（）屬性如何實際工作

Question

我對nnth-child（）屬性的實際工作方式感到困惑，有時需要參數如：nth-​​child（2），第n個 - 兒童（2n），：第n孩子（2n + 1），他們的確切含義是關於偶數，奇數div還是其他任何財產。

Answer 1

從鏈路A報價下面

使用式（AN + B）。說明：a表示週期大小，n是 計數器（從0開始），b是偏移值。

在這裏，我們爲所有p元素，其索引 3的倍數背景色：

p:nth-child(3n+0) { background: #ff0000; }

因此，基本上，你可以使用一個號碼，:nth-child(n)，選擇n元素的第一個孩子。

然後你也可以用:nth-child(odd/even)來選擇其他的孩子。

最後，您可以使用上面引用的公式。 3n將選擇索引爲3（2nd孩子）的每個孩子，所以5n將選擇索引爲5（4th孩子）的孩子等等。如果添加+1，則選擇後面的每個元素。 +2將選擇前面的每個元素2。這是一個抵消。

實施例：

:nth-child(5n+2) - 這將在每5th元件的前面選擇的每一元件2：7

• 5 + 2 =索引，6th元件
• 10 + 2 = 12，11th元件的索引
• 15 + 2 =的索引10，16th元件
• 20 + 2 =索引的22，21st元件

W3Schools - :nth-child()

Answer 2

的:nth-child()接受關鍵字奇/偶或表達作爲參數，用最簡單的可能的表達是一個數。

請參閱這篇文章CSS-tricks.com更詳細的信息：https://css-tricks.com/how-nth-child-works/