我对 css 中的第 n 个子选择器很好奇。但是现在对我来说很难理解它的逻辑。下面给出的示例突出显示第一个和最后一个跨度。
<div>
<span>This span is limed!</span>
<span>This span is not. :(</span>
<em>This one is odd. </em>
<span>Sadly, this one is not...</span>
<span>But this one is!</span>
</div>
span:nth-child(2n+1) {
background-color: green;
}
n代表一个自然数。意义，[0, 1, 2, 3, 4, 5, ...]
因此，在您的 CSS 中，2n+1意味着：
2*0+1(= 1)、2*1+1(= 3)、2*2+1(= 5)、2*3+1(= 7) 等等。
您的代码基本上选择了所有奇数的孩子。可以写得更短，即：
nth-child(odd)
对于 first 和 last，您可以使用span:first-childandspan:last-child选择器。
关于第 n 个孩子，它只是重复选择元素。
span:nth-child(2n+1)在示例中将选择 1、3、5 等...所有奇数跨度。
在您的具体示例中，它正在选择奇数元素，如下表所示。为什么要计算<em>？这是因为顾名思义，它正在搜索父母的孩子，<div>在这种情况下，<em>它是父母的第三个孩子，但因为它不是，<span>所以没有突出显示。
:nth-child可以使用公式、数字或某些关键字来选择n对象具有的索引所在的某些元素。简而言之，拥有遵循特定顺序或设计的自定义 CSS 选项是一个非常好的技巧，而无需拥有特殊的类并且在构建 HTML 时不必考虑。
即，当您可以只使用选择器时，您不希望为奇数和偶数成员提供特殊的 CSS 类:nth-child。想象一下，如果您正在编写一个表格并在另一行上着色，如果您有 CSS 类，那么在表格中间添加一些东西并更改之后行的 CSS 类以遵循奇数/偶数模式将会很麻烦。
关键词
:nth-child(奇数) :nth-child(偶数)
示例公式（带有很棒的 ASCII 表）
作为描述，下表告诉您将选择的第 n 个元素。例如，当您使用公式时，2n+1将选择第 1、第 3、第 5、第 7、第 9、第 11、... 元素。
n 2n+1 4n+1 4n+4 4n 5n-2 -n+3 0 1 1 4 - - 3 1 3 5 8 4 3 2 2 5 9 12 8 8 1 3 7 13 16 12 13 - 4 9 17 20 16 18 - 5 11 21 24 20 23 -
资源
引用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+0OR2n只代表偶数。 ..
演示（奇数）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 中的第二个元素不是spanbut p，所以如果你使用，选择器就会失败nth-child
在哪里使用nth-of-type将选择你的第二个span并且会跳过p