調試第n個孩子選擇

Question

我有以下選擇：

.progress:nth-child(3n+1) { 
    background: teal; 
} 

.progress:nth-child(3n+2) { 
    background: red; 
} 

.progress:nth-child(3n+3) { 
    background: blue; 
} 

但是所有項目的結束與一個水鴨背景。這些選擇器是否正確？我想我應該得到：

1. 蒂爾（每3，從1開始）
2. 紅（每3，從2）
3. 藍（每3，從3） 等。

我已經在Ubuntu上測試了Firefox 3.5.8和Opera 10.10。除了CSS中的這些規則之外，也進行了測試。我使用YUI重置樣式表，但不包括它什麼都不做。

Answer 1

你的CSS似乎是正確的，假設下面的HTML：

<div class="progress">1</div> 
<div class="progress">2</div> 
<div class="progress">3</div> 

也許你誤解的:nth-child的意義，和你的HTML/CSS的組合不正確。

foo:nth-child並不意味着「所有的元素是foo的的ñ個孩子」，而是「每ñ日foo元素」。

專業提示：使用the :nth-child() tester。或者這一個：http://leaverou.me/demos/nth.html

Answer 2

我猜每個.progress實際上是元素的第一個孩子。舉個例子來說，所有.progress元素必須是兄弟姐妹。

即這將工作：

<div class="progress">1</div> 
<div class="progress">2</div> 
<div class="progress">3</div> 

...但這不會：

<div><span class="progress">1</span></div> 
<div><span class="progress">2</span></div> 
<div><span class="progress">3</span></div> 

在這種情況下，你需要將progress類移動到<div>然後用這個CSS：

.progress:nth-child(3n+1) span { 
    background: teal; 
}