引用W3C
:nth-child(an+b)
伪类表示法表示在文档树中具有兄弟姐妹的元素,an+b-1
对于任何正整数或 0 值n
,并且具有父元素。对于大于零的 a 和 b 的值,这有效地将元素的子元素分成 a 元素组(最后一组取余数),并选择每个组的第 b 个元素。例如,这允许选择器对表格中的每隔一行进行寻址,并且可以用于以四次循环交替段落文本的颜色。a 和 b 值必须是整数(正数、负数或零)。元素的第一个子元素的索引为 1。
那么,现在span:nth-child(2n+1)
将代表每个奇数个元素的含义是什么,简单的解释,每个1加2,所以如果等式是(3n+2)
这样的,它将像2、5、8等。其中2n+0
OR2n
只代表偶数。 ..
演示(奇数)span:nth-child(2n+1)
演示 2(偶数)span:nth-child(2n+0)
或span:nth-child(2n)
我们也有一个伪类,nth-of-type
一般来说它只是相同的东西,但你可以把它当作一个更严格的选择器,它nth-child
会选择任何类型的元素,其中nth-of-type
将选择特定的元素。
所以,假设你想定位第二个span
元素,但你在 DOM 中的第二个元素不是span
but p
,所以如果你使用,选择器就会失败nth-child
演示
在哪里使用nth-of-type
将选择你的第二个span
并且会跳过p
演示 2