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

我试图按类名称使用nth-child选择器。 Fiddle如何选择使用类名称的css nth-child（3n + 1）选择器

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类？

我需要一些解释。

来源

2014-02-20 Manoj

因为“nth-child”是指儿童相对于父母，而不是您的选择器（并且第一个.span是div的第二个孩子） –

看看'http：// css-tricks .com/how-nth-child-works /' – goseo

我在此详细阐述这一点：http://stackoverflow.com/questions/19909458/selecting-nth-of-type-in-selenium/19909750#19909750 – sircapsalot

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

这可能会有点复杂但元件这里索引开始从2

B = 2将意味着第一元件总是choosen。因此， 4n + 2将意味着从第一个元素开始，并在周期中加上4 = 1,5,9。

n的值从0开始

同样B = 3将意味着从第二个元素开始，你不能在系列第n个孩子= 3N选择的“.span”第1个要素+ 1。

1对于您的系列1,3,6,9 ...“1”似乎无法正常工作。如果您需要选择与他人在您的系列沿着第一个元素：

添加

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

希望它解释了如何使用第n个孩子的。欲了解更多参考http://css-tricks.com/how-nth-child-works/

来源

2014-02-20 12:54:47 Amar

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

回答

相关问题