如何交替行顏色添加到一個CSS類

0

使用這樣

.widget li:nth-child(even){ 
     background: #CCC 
} 

.widget li:nth-child(odd){ 
     background: #000 
}

來源

2016-10-21 12:32:04

0

目前還不清楚是否要對li元素或的div widget類替代文本顏色。如果你的意思是後者，請嘗試以下操作：

.widget { 
    color: myoddcolr; 
} 

.widget:nth-of-type(odd) { 
    color: myoddcolr; 
}

來源

2016-10-21 12:37:44 user31782

+0

我認爲這是很清楚，他希望針對'li'，因爲這就是他的CSS是顯示 – Lee

+0

作爲非英語母語者我無法破譯他（她）的意思。 '.widget li'不是一個類。通常'li'元素不被視爲行 - 參見行col網格系統 – user31782

+0

我明白了，但是當他在談論窗口小部件時，假設每個「li」將是一個窗口小部件塊，這可能是一列中的一行......這是公平的。另外，他希望交替「行」如果你有一堆'li'項目，這將是有意義的。 – Lee

0

你可以像這樣使用：nth-child（2n + 1）。我希望這能幫到您！

.widget { 
 
\t \t padding-left: 0px; 
 
\t } 
 
\t .widget li{ 
 
\t \t margin-top: 1px; 
 
\t \t padding: 5px; 
 
\t } 
 
\t .widget li:nth-child(2n+1){ 
 
\t \t background: #ccc; 
 
\t } 
 
\t .widget li:nth-child(2n+2){ 
 
\t \t background: #eee; 
 
\t }

<ul class="widget"> 
 
\t <li>Row - 1</li> 
 
\t <li>Row - 2</li> 
 
\t <li>Row - 3</li> 
 
\t <li>Row - 4</li> 
 
\t <li>Row - 5</li> 
 
\t <li>Row - 6</li> 
 
</ul>

來源

2016-10-21 12:59:13

如何交替行顏色添加到一個CSS類

回答

相關問題