奇数行和偶数行不同的 CSS 样式答案

【问题标题】：Different CSS style on odd and even rows奇数行和偶数行不同的 CSS 样式
【发布时间】：2011-07-03 01:23:36
【问题描述】：

是否可以仅使用 CSS 为动态生成的表格在奇数行和偶数行上设置不同的样式，而无需我在迭代集合时为每一行设置正确的样式？

【问题讨论】：

【解决方案1】：

您可以简单地使用 jquery 并为奇数行添加类，例如

$("tr:nth-child(odd)").addClass("odd");

并使用css作为样式

.odd{background-color:#657383}

【讨论】：

【解决方案2】：

您可以使用nth-child 选择器http://reference.sitepoint.com/css/pseudoclass-nthchild，但并非所有浏览器都支持。

【讨论】：

【解决方案3】：

你可以用 CSS3 做到这一点。

tr:nth-child(2n+1) /* targets all odd rows */
tr:nth-child(2n) /* targets all even rows */

【讨论】：

【解决方案4】：

我不确定这是否可以跨浏览器工作，我自己更喜欢 jQuery，但 css-only 应该可以解决问题：

tr:nth-child(even) { ... }
tr:nth-child(odd) { ... }

【讨论】：