我想通過使用nth-child(odd)
添加替代行顏色的div。替代行顏色的div在CSS中
我需要添加類別名稱爲alternative_cls
的div的替代顏色,但不能添加到具有不同類名稱的div。
但問題是它不會跳過不同類名的div,替代顏色應用包括不同的類名爲div也。
這裏是CODE FIDDLE
我要的是
我想通過使用nth-child(odd)
添加替代行顏色的div。替代行顏色的div在CSS中
我需要添加類別名稱爲alternative_cls
的div的替代顏色,但不能添加到具有不同類名稱的div。
但問題是它不會跳過不同類名的div,替代顏色應用包括不同的類名爲div也。
這裏是CODE FIDDLE
我要的是
這是工作,你需要什麼?:
.alternative_cls:first-child,
.alternative_cls:nth-child(2n){
background:#ccc;
}
在這裏你去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個孩子選擇,你就必須考慮到這一點特殊性
我提出.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>
肯定也有效:) +1 – abbood 2013-02-28 10:08:05
正如在其他的答案已經說了,在第n個孩子選擇兒童的罪名,而這一切;你可以做任何事情來改變這一點。 正如前面所說,您可以將導致第一級孩子以外的問題的div引入其中。
如果這是一個問題,另一種方法是將該元素更改爲不是div。然後,您可以使用div:僅計數div的類型(偶數)的。
另一種方式,你需要以某種方式改變你的DOM。
@PerfectDark更新了問題。我想輸出如圖所示 – Sowmya 2013-02-28 06:16:54
嗨我更新你的小提琴[這裏](http://jsfiddle.net/jhunlio/Dfy59/3/) – jhunlio 2013-02-28 06:18:32
@jhunlio這不是我想要的。我需要給出單個類名。總之,替代顏色應該只適用於.alternative_cls div,它不應該考慮.no_bg div。 – Sowmya 2013-02-28 06:20:29