html - :nth-child() property actually works怎么办

Question

我对 :nth-child() 属性的实际工作方式感到困惑，有时它会采用诸如 :nth-child(2),:nth-child(2n),:nth-child( 2n + 1)，它们的确切含义是关于偶数、奇数 div 的说法，或者它背后是否有任何其他属性。

Answer 1

引用自下面的链接

Using a formula (an + b). Description: a represents a cycle size, n isa counter (starts at 0), and b is an offset value.

Here, we specify a background color for all p elements whose index isa multiple of 3:

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

基本上，您可以使用一个数字 :nth-child(n) 来选择元素的第 n 个子元素。

然后您还可以使用 :nth-child(odd/even) 来选择所有其他 child 。

最后，您可以使用上面引用的公式。 3n 将选择索引为 3 的每个 child (2nd child )，因此 5n 将选择具有5 的索引(4th child )等等。如果您添加 +1，您将选择它之后的每个元素。 +2 将选择它前面的每个元素 2。这是一个偏移量。

例子:

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

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

W3Schools - :nth-child()