css - 第 n 个 :child selector in css 中的 n 是什么

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)