样式交替表中的行

时间:2010-08-26 14:41:51

标签: css css-selectors

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

我需要设置服务器组件生成的html输出样式,并且输出不会为交替行设置样式。我可以写一个javascript(或者只是改变组件)但我很好奇是否有可能在纯CSS中做。

感谢 康斯坦丁

1 个答案:

答案 0 :(得分:10)

在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");
});