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课程中选择第一个孩子。？

我需要一些解释。

Answer 1

使用公式（a + b）时。 a表示循环大小，n是计数器（从0开始），b是偏移值。

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

b = 2意味着始终选择第一个元素。所以， 4n + 2意味着从第一个元素开始并在周期中添加4 = 1,5,9。

n的值从0开始。

同样，b = 3意味着从第二个元素开始你不能在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/

如何使用类名选择css nth-child（3n + 1）选择器

1 个答案: