替代行顏色的div在CSS中

Question

我想通過使用nth-child(odd)添加替代行顏色的div。

我需要添加類別名稱爲alternative_cls的div的替代顏色，但不能添加到具有不同類名稱的div。

但問題是它不會跳過不同類名的div，替代顏色應用包括不同的類名爲div也。

這裏是CODE FIDDLE

我要的是

Answer 1

這是工作，你需要什麼？：

.alternative_cls:first-child, 
.alternative_cls:nth-child(2n){ 
    background:#ccc; 
} 

jsFiddle

Answer 2

在這裏你去http://jsfiddle.net/Dfy59/6/

解釋：

通過definition一個CSS n-th:child選擇

比賽的每一個元素是第n個孩子，無論哪種類型，其母公司。

讓我們把你的代碼，例如（先取下no_bg節點）：

.alternative_cls:nth-child(odd){ 
    background:#ccc; 
} 

應用，像這樣：

<div class="alternative_cls"> <!-- alternative_cls(n)=1, odd so apply = (grey) --> 
    ssf 
</div> 
<div class="alternative_cls"> <!-- alternative_cls(n)=2, even so don't apply = (transparent) --> 
    ssf 
</div> 
<div class="alternative_cls"> <!-- alternative_cls(n)=3, odd so apply = (grey)--> 
    ssf 
</div> 
<div class="alternative_cls"> <!-- alternative_cls(n)=4, even so don't apply = (transparent) --> 
    ssf 
</div> 
.. 
etc 

當你插入一個div的，混亂髮生不同類別之間，當發生這種情況時，css仍然將入侵者div計爲.alternative_cls的兄弟，但之後不適用css：

<div class="alternative_cls"> <!-- alternative_cls(n)=1, odd so apply = (grey) --> 
    ssf 
</div> 
<div class="no_bg"> <!--alternative_cls(n)=2, but don't apply alternative_cls, just apply no_bg = (pink) --> 
    ssf 
</div> 
<div class="alternative_cls"> <!-- n=3, odd so apply = (grey) NOTE: you'd expect the nth-child selector to skip the last node.. but it didn't, which caused the confusion --> 
    ssf 
</div> 
<div class="alternative_cls"> <!-- n=2, even so don't apply = (transparent) --> 
    ssf 
</div> 
<div class="alternative_cls"> <!-- n=3, odd so apply = (grey)--> 
    ssf 
</div> 
<div class="alternative_cls"> <!-- n=4, even so don't apply = (transparent) --> 
    ssf 
</div> 

我知道這個祕密的方式是看我的Chrome瀏覽器開發工具，並與jQuery選擇打轉轉：

$('.alternative_cls:nth-child(1)') 

回報

[<div class="alternative_cls"> 
    ssf 
</div>] 

但（，這是部分違反直覺的）

$('.alternative_cls:nth-child(2)') 

返回

[] 

你會期望這個選擇器在no_bg div之後立即返回節點.. 但它不是！

繼續..

$('.alternative_cls:nth-child(3)') 

回報

[<div class="alternative_cls"> 
    ssf 
</div>] 

（我推薦你試試這個自己爲理念，以下沉）

這樣去解決這一點，你只需設置CSS爲

.alternative_cls{ 
    width:100%; 
    height:60px 
} 
.alternative_cls:nth-child(1), .alternative_cls:nth-child(even){ 
    background:#ccc; 
} 
.no_bg{ 
    width:100%; 
    height:60px; 
    background:#f8d6d6 
} 

發生這種情況

<div class="alternative_cls"> <!-- n=1, apply the nth-child(1) rule = (grey) --> 
    ssf 
</div> 
<div class="no_bg"> <!--alternative_cls(n)=2, but don't apply alternative_cls, just apply no_bg = (pink) --> 
    ssf 
</div> 
<div class="alternative_cls"> <!-- n=3, odd, so don't apply any rule = (transparent)--> 
    ssf 
</div> 
<div class="alternative_cls"> <!-- n=2, even so apply the nth-child(even) rule = (grey) --> 
    ssf 
</div> 
<div class="alternative_cls"> <!-- n=3, odd, so don't apply any rule = (transparent)--> 
    ssf 
</div> 
<div class="alternative_cls"> <!-- n=4, even so apply the nth-child(even) rule = (grey) --> 
    ssf 
</div> 

我希望這清楚..所以這方面的知識，您可以繼續使用第n個孩子選擇，你就必須考慮到這一點特殊性

Answer 3

我提出.no_bg DIV到.alternative_cls ，如果它工作的很好。

<div class="alternative_cls"> 
    ssf 
    <div class="no_bg"> 
    ssf 
</div> 
</div> 
<div class="alternative_cls"> 
    ssf 
</div> 
<div class="alternative_cls"> 
    ssf 
</div> 
<div class="alternative_cls"> 
    ssf 
</div> 
<div class="alternative_cls"> 
    ssf 
</div> 

DEMO

Answer 4

正如在其他的答案已經說了，在第n個孩子選擇兒童的罪名，而這一切;你可以做任何事情來改變這一點。 正如前面所說，您可以將導致第一級孩子以外的問題的div引入其中。

如果這是一個問題，另一種方法是將該元素更改爲不是div。然後，您可以使用div：僅計數div的類型（偶數）的。

另一種方式，你需要以某種方式改變你的DOM。