如何交替行颜色添加到一个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类

回答

相关问题