html - 如何使用类名选择 css nth-child(3n+1) 选择器

Question

我正在尝试按类名使用 nth-child 选择器。 Fiddle

HTML:

<div>
<span class="head">Heading</span>
<div class="span">1</div>
<div class="span">2</div>
<div class="span">3</div>
<div class="span">4</div>
<div class="span">5</div>
<div class="span">6</div>
<div class="span">7</div>
<div class="span">8</div>
<div class="span">9</div>
</div>

CSS:

.span:nth-child(3n+1){
    color: red;
}

为什么不从 .span 类中选择第一个 child 。？

我需要一些解释。

Answer 1

当使用公式 (an + b) 时。 a代表一个循环大小，n是一个计数器(从0开始)，b是一个偏移值。

这可能有点棘手但是这里元素的索引从2开始

b=2 意味着总是选择第一个元素。所以，4n+2 表示从第 1 个元素开始，在 cycle=1,5,9 中添加 4。

n的值从0开始。

类似地，b=3 表示从第 2 个元素开始您不能选择 nth-child=3n+1 系列中“.span”的第一个元素。

1对于你的系列 1,3,6,9... '1' 似乎是乱序的。如果您需要选择系列中的第一个元素和其他元素:

添加

.span:nth-child(2){
    color: red;
}

希望它能解释 nth-child 的使用。更多引用http://css-tricks.com/how-nth-child-works/