nth中的n是什么:css中的子选择器

Question

我很好奇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;
}

Answer 1

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)