如何在css3選擇器中的兩列中交替顏色？

Question

如果我有這個代碼

 #list>div { font-size: 18px; float: left; margin: 0 10px 10px 0; width: 150px; } #list>div:nth-child(2n+1) { clear: left; } #list>div:nth-child(odd) { background-color: red; } #list>div:nth-child(even) { background-color: blue; } 

 <div id="list"> <div class="list-item">A</div> <div class="list-item">B</div> <div class="list-item">C</div> <div class="list-item">D</div> <div class="list-item">E</div> <div class="list-item">F</div> <div class="list-item">G</div> <div class="list-item">H</div> <div class="list-item">I</div> <div class="list-item">J</div> </div> 

這顯示為

A B
C D
E F 
G H 
I J

哪個好，但是，我想要背景顏色

red blue
blue red
red blue
blue red
red blue

但是，上面的代碼使每列的顏色相同。 有沒有一種純粹的css3方法可以做到這一點？

Answer 1

 #list>div { font-size: 18px; float: left; margin: 0 10px 10px 0; width: 150px; } #list>div:nth-child(2n+1) { clear: left; } #list>div:nth-child(4n+1), #list>div:nth-child(4n) { background-color: red; } #list>div:nth-child(4n+2), #list>div:nth-child(4n+3) { background-color: blue; } 

 <div id="list"> <div class="list-item">A</div> <div class="list-item">B</div> <div class="list-item">C</div> <div class="list-item">D</div> <div class="list-item">E</div> <div class="list-item">F</div> <div class="list-item">G</div> <div class="list-item">H</div> <div class="list-item">I</div> <div class="list-item">J</div> </div> 

Answer 2

看一下這個：

 #list>div { font-size: 18px; float: left; margin: 0 10px 10px 0; width: 150px; background-color: red; } #list>div:nth-child(4n+1) { background-color: blue; } #list>div:nth-child(4n) { background-color: blue; } #list>div:nth-child(2n+1) { clear:left } 

 <div id="list"> <div class="list-item">A</div> <div class="list-item">B</div> <div class="list-item">C</div> <div class="list-item">D</div> <div class="list-item">E</div> <div class="list-item">F</div> <div class="list-item">G</div> <div class="list-item">H</div> <div class="list-item">I</div> <div class="list-item">J</div> </div>