奇数行和偶数行上的CSS样式不同

Question

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

Answer 1

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

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

Answer 2

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

您还可以按照What is the best way to style alternating rows in a table?

所述使用jquery

Answer 3

您可以使用CSS3执行此操作。

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

Answer 4

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

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

并使用css作为

设置样式

.odd{background-color:#657383}