如何：nth-​​child（）属性实际工作

Question

我对：nth-​​child（）属性如何实际工作感到困惑，有时它会采用如下参数：nth-​​child（2），：nth-​​child（2n），：nth-​​child（ 2n + 1），他们究竟是什么意思，是关于偶数，奇数div的说法，还是其背后还有其他任何属性。

Answer 1

以下链接引用

  

使用公式（a + 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的孩子（{{1} }））等等。如果添加4th，则会选择其后的每个元素。 +1将选择前面的每个元素2。这是一个抵消。

示例：

+2 - 这将选择每个:nth-child(5n+2)元素前面的每个元素2：

• 5th = 5 + 2，7元素
的索引
• 6th = 10 + 2，12元素
的索引
• 11th = 15 + 2，17元素
的索引
• 16th = 20 + 2，22元素
的索引

W3Schools - :nth-child()

Answer 2

:nth-child()接受关键字odd / even或表达式作为参数，最简单的表达式是数字。

有关详细信息，请参阅CSS-tricks.com上的这篇文章：https://css-tricks.com/how-nth-child-works/