：交替顏色的nth-child配方

Question

我有一堆寬度爲50％的div標籤，這使得它們可以坐在2格的標籤中。我非常努力地定義交替的背景顏色，以產生類似於棋盤格的效果。正如你在Fiddle中看到的那樣，不管我嘗試過的食譜如何，所有的顏色都坐在同一側，所以爲了這個問題的目的，我已經回到了（奇數）和（偶數）。

我無法在備用div上指定特定的類，因爲每個塊的內容都是通過Wordpress查詢生成的。

感謝

HTML

<div>Block</div> 
<div>Block</div> 
<div>Block</div> 
<div>Block</div> 

CSS

div { 
    width: 50%; 
    height 100px; 
    padding: 15px; 
    color: white; 
    box-sizing: border-box; 
    margin: 0; 
    float: left; 
} 
div:nth-child(odd) { background: red; } 
div:nth-child(even) { background: blue; } 

Answer 1

試試這個

div { 
 
    width: 50%; 
 
    height 100px; 
 
    padding: 15px; 
 
    color: white; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    float: left; 
 
} 
 
div:nth-child(4n+1), div:nth-child(4n+4) { background: red; } 
 
div:nth-child(4n+2), div:nth-child(4n+3) { background: blue; }

<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div> 
 
<div>Block</div>

Answer 2

使所有這些div有藍色背景，首先，然後用

div:nth-child(4n+1), div:nth-child(4n+4) { background: red; } 

選擇每四個第一和第四個。

https://jsfiddle.net/fobc6fs5/3/