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

【问题标题】：How to select css nth-child(3n+1) selector using class name如何使用类名选择 css nth-child(3n+1) 选择器
【发布时间】：2014-03-21 08:37:52
【问题描述】：

我正在尝试按类名使用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 类中选择第一个子级。？

我需要一些解释。

【问题讨论】：

因为“nth-child”是指相对于父级的子级，而不是您的选择器（第一个 .span 是 div 的第二个子级）
看看http://css-tricks.com/how-nth-child-works/
我在这里稍微详细说明一下：stackoverflow.com/questions/19909458/…
@sircapsalot：你链接的答案是错误的
@onetrickpony 具体是哪一部分？

标签： html css

【解决方案1】：

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

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

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

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/

【讨论】：