如何選擇使用類名稱的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）選擇器

回答

相關問題