div元素css的交替着色答案

【问题标题】：alternate coloring of div elements cssdiv元素css的交替着色
【发布时间】：2012-02-01 02:41:51
【问题描述】：

我有以下 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 来完成？

【问题讨论】：

标签： css

【解决方案1】：

单独使用 css 就可以使用

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

但它只是 CSS3

【讨论】：

请注意，nth-child 选择器最初是在 Internet Explorer 9 中添加的。
@LachlanMcDonald 这就是为什么我注意到它是只有 IE9+ 支持的 CSS3
@user902620：这个解决方案应该有效。我已经编辑了这个答案，让它更明显地工作。您是否在现代浏览器中对其进行测试？
IE9 将以兼容模式运行本地文件，这似乎是一个常见的并发症。请参阅此 Stackoverflow 问题：stackoverflow.com/questions/5914888/…

【解决方案2】：

在 JSFIDDLE

上查看演示

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

这是在 2001 年推出的。主要适用于旧浏览器。

【讨论】：

【解决方案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>

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

【讨论】：

对不起，我询问了现有 dom。
nth-child 标签还没有准备好迎接黄金时段，免得你头疼！