Question

我有以下DOM元素：

<div class="document>
  <div class="text"> some text1 </div>
  <div class="text"> some text2 </div>
  <div class="text"> some text3 </div>
  <div class="text"> some text4 </div>
</div>

我想交替着色它们，意思是text1，text3是相同的颜色，text2，text4是相同的颜色。怎么能用css完成呢？

Answer 1

单独使用css即可使用

.text:nth-child(odd)
{
    color: green;
}

但它只是CSS3

Answer 2

请参阅 JSFIDDLE

上的演示

.text:nth-child(odd)
{
    color: green;
}
.text:nth-child(even)
{ 
      color:Red;
}

这是在2001年推出的.Doest主要在旧浏览器中工作。

Answer 3

为什么不在HTML代码中添加2个类？

<div class="document>
  <div class="text odd"> some text1 </div>
  <div class="text even"> some text2 </div>
  <div class="text odd"> some text3 </div>
  <div class="text even"> some text4 </div>
</div>

然后，按那些类应用颜色......

div元素css的替代着色

3 个答案: