第n個孩子（甚至）的CSS類只不是所有的節點

試圖唯一的顏色一定'story'類的每個其他分區：第n個孩子（甚至）的CSS類只不是所有的節點

<div class="wrap-well"> 
    <div class="story">odd</div> 
    <div class="story">even</div> 
    <div class="clearfix"></div> 
    <div class="story">odd</div> 
    <div class="story">even</div> 
    <div class="clearfix"></div> 
    <div class="story">odd</div> 
    <div class="story">even</div> 
</div>

CSS：

.wrap-well div.story:nth-child(even) { 
    background-color:#ff00ff; 
}

小提琴： http://jsfiddle.net/NF2dk/

但似乎'clearfix'列也計算在內......

來源

2014-01-30 keeg

@Marcin和@Explosion丸是絕對正確的在這裏，但我檢查你的DOM，你一貫對那裏，你可以使用相鄰選擇實現這一目標，而不是使用nth-child或nth-of-type

.wrap-well div.story + div.story { 
    background-color:#ff00ff; 
}

Demo

通過這種方式，它只會做你想達到什麼樣的工作，也將它比作的更加兼容pseudos

來源

2014-01-30 18:37:09

沒有什麼像nth-of-class()選擇器。

最接近你可以得到的是nth-of-type()。但它會查看元素標記，而不是分配給元素的class。

來源

2014-01-30 18:33:40 MarcinJuraszek

nth-child不能與選擇器一起工作，但是元素。無論選擇器的組成如何，它都會選擇每個div。

您可以使用nth-of-type僅選擇<div>元素，並使用其他元素（如<br>）作爲clearfix。

http://jsfiddle.net/NF2dk/1/

來源

2014-01-30 18:36:03

'
'可能不是最好的候選人，因爲它會施加額外的空白，如在更新的小提琴中看到的。也許帶'display：block'的''更合適。 –

第n個孩子（甚至）的CSS類只不是所有的節點

回答

相關問題