我很好奇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;
}
答案 0 :(得分：6)
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（= { {1}}）等等。
您的代码基本上选择了所有奇怪的孩子。可写得更短，即：
7答案 1 :(得分：4)
首先，您可以使用span:first-child和span:last-child选择器。
关于nth-child，它只是重复选择elemet。
示例中的span:nth-child(2n+1)将选择1,3,5等...所有奇数跨度。
答案 2 :(得分：3)
在您的具体示例中，它正在选择奇数元素，如下表所示。为什么要计算<em>？这是因为顾名思义，它正在搜索父<div>的孩子，在这种情况下，<em>是父母的第3个孩子，但因为它不是<span>没有突出显示。
:nth-child可以使用公式，数字或某些关键字来选择n是对象所具有的索引的某些元素。简而言之，使用自定义CSS选项遵循特定的顺序或设计是一个非常好的技巧，无需使用特殊的类，并且在构建HTML时必须考虑到这一点。
即。当你可以使用:nth-child选择器时，你不希望有奇数和偶数成员的特殊CSS类。想象一下，如果你正在编写一个表和颜色的其他行，如果你有CSS类，那么在表的中间添加一些内容并在遵循奇数/偶数模式之后更改行的CSS类会很麻烦。 / p>
<强>关键字
:nth-child(odd) :nth-child(even)
示例公式（带有令人敬畏的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 -
<强>资源
答案 3 :(得分：2)
引自W3C
:nth-child(an+b)伪类表示法表示一个元素 在文档树中有an+b-1个兄弟姐妹，对于任何n的正整数或零值，并具有父元素。对于 a和b的值大于零，这有效地划分了 将元素的子元素转换为元素的组（最后一组采用 其余的），并选择每组的第b个元素。对于 例如，这允许选择器寻址a中的每隔一行 table，可用于替换段落文本的颜色 四个周期。 a和b值必须是整数（正数， 否定或零）。元素的第一个子元素的索引是1.
那么，现在span:nth-child(2n+1)的含义将代表每个奇数个元素，简单的解释，每1加2，所以如果方程式像(3n+2)那么它就像2， 5,8等。2n+0或2n只代表...... {/ p>
Demo（奇数）span:nth-child(2n+1)
Demo 2（偶数）span:nth-child(2n+0)或span:nth-child(2n)
我们还有一个伪nth-of-type，它一般只是同样的东西，但你可以把它当作一个更严格的选择器，nth-child将选择任何类型的元素< / strong> nth-of-type将选择特定元素。
所以，假设你想要定位第二个span元素，但是你在DOM中的第二个元素不是span而是p，所以如果使用{{{}}，选择器将会失败1}}
使用nth-child选择您的第二个nth-of-type，然后跳过span