2015-10-26 130 views
0

下面是它的一個小提琴不工作:http://jsfiddle.net/Chenzorama/gz3hch7s/3/CSS第n個孩子(2N)選擇選擇所有兒童

我簡單的HTML看起來是這樣的:

<div class="top"> 

<div class="typeone">ONE</div> 
<div class="typetwo">Two</div> 
<div class="typeone">ONE</div> 
<div class="typetwo">Two</div> 
<div class="typeone">ONE</div> 
<div class="typetwo">Two</div> 
<div class="typeone">ONE</div> 
<div class="typetwo">Two</div> 
<div class="typeone">ONE</div> 
<div class="typetwo">Two</div> 
<div class="typeone">ONE</div> 
<div class="typetwo">Two</div> 
<div class="typeone">ONE</div> 
<div class="typetwo">Two</div> 

</div> 

我基本上是試圖應用風格到每一個其他.typetwo格...

我有一些CSS(嗯,SCSS)應IMO工作(通過使每隔一個灰色):

.top {   
    .typetwo { 
     background-color: #0000ff; 
     &:nth-child(2n) { 
      background-color: #555555; 
     } 
    } 
} 

但是當我運行這個時,它變成灰色。從我可以告訴的是,它正在計算所有div內的頂部。

奇怪的是,&:第n個孩子(3N)正常工作?有人告訴我,我並不瘋狂。

回答

2

,因爲他們是所有div(包括typeone和typetwo)的.TOP的div的兒童應該改爲

&:nth-child(4n) 

的jsfiddle here

+0

對......我已經到了該解決方案(即使它似乎......我錯了。)但這是否意味着你不能使用類作爲第n個孩子選擇? – Chenzo

+0

正如它所說的是第n個孩子,所以它不依賴於類名。 –

+0

就是這樣。謝謝,@弗洛林流行音樂。我沒瘋。錯了。 – Chenzo