样式交替表中的行

Question

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

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

谢谢康斯坦丁

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