我如何「斑馬條紋」CSS列？

Question

比方說，我有以下標記：

<ul class="mycolumns"> 
    <li>Text</li> 
    <li>Text</li> 
    <li>Text</li> 
    ... 
    <li>Text</li> 
    <li>Text</li> 
</ul> 

下面CSS（假設前綴）：

.mycolumns { 
    column-count: 3; 
    column-gap: 10px; 
} 

我 「斑馬條紋」 奇列如何？這裏有一個fiddle與我認爲是正確的（注意我正在使用SCSS爲我的CSS）

Answer 1

如果你不能用CSS做到這一點，jQuery可以隨時幫助你。

可以使用jQuery Columnizer Plugin執行相同的任務，但因爲它包裝的實際元素的列，您可以通過CSS針對各個列：

.column:nth-child(odd) { 
    background-color: rgb(255, 200, 200); 
}