样式表中的交替行

【问题标题】：styling alternating rows in a table样式表中的交替行
【发布时间】：2010-08-26 22:49:37
【问题描述】：

是否可以使用仅考虑元素层次结构而不使用样式名称的样式选择器来设置 html 表格中交替行的样式？

我需要设置由服务器组件生成的 html 输出的样式，并且输出未设置交替行的样式。我可以编写一个 javascript（或者也可以更改组件），但我很好奇是否可以在纯 css 中完成。

谢谢康斯坦丁

【问题讨论】：

取决于什么样的服务器组件生成它
相关：stackoverflow.com/questions/474216/…
@KennyTM：它需要在 IE6 中工作，所以我想没有 javascript 是不可能的，但我的问题是一个普遍的问题，所以我有兴趣了解如何在 css2 和css3.
+1 感谢您提出这个问题，这对我有帮助！ =)

【解决方案1】：

在 CSS 3 中：

tr:nth-child(odd)    { background-color:#eee; }
tr:nth-child(even)    { background-color:#fff; }

在 CSS 2 中，你必须使用一些类，例如甚至像这样的行：

.even { background-color: #00000; }

并且您必须在生成服务器端（或手头的 ;-) 行时应用它们或使用例如jQuery 喜欢：

$(document).ready(function () {
    $("tr.nth-child(even)").addClass("even");
    //Or
    $("tr:even").addClass("even");
});

【讨论】：

现在更新：正如 here 发布的那样，您可以使用 selectivizr 在 IE6-8 上模拟 CSS3 选择器（您的 CSS 将适用于该版本，并且具有良好支持的浏览器不会被污染IE 的技巧）