css - 交替行颜色

Question

我想以不同的颜色显示交替行。我已经在 CSS 中指定了颜色。并且大多数行都正常工作。当我检查时，行有 class="odd" 或 class="even" 但有些行有 class="odd even" 和 class="even odd"。它是怎么发生的？谁能解释为什么将班级视为“奇偶”或“奇偶”。提前致谢。

table.dataTable .odd { background-color:  red; }
table.dataTable .even { background-color: green;  }

Answer 1

你为什么还要为此使用课程？

tr {background-color:white}
tr:nth-child(even) {background-color:black}

Answer 2

如果您必须支持较旧的浏览器（如 IE8），则 nth-child 不起作用。一个简单的解决方法是结合 Kolink 和 falguni 的解决方案：

tr {background-color:white}
tr:nth-child(even), tr.even {background-color:black}

$(document).ready(function(){
  $("tr:even").addClass('even');
});

falguni 给出的解决方案有一个不好的做法，它使用 JS 来更新样式。如果您决定它不应该是黑色，而是蓝色，则必须更改两个位置。我的例子不需要那个。

我的代码可以改进，您可以检查用户是否支持 :nth-selector 和 IF NOT（添加类）以提高性能。

Answer 3

试试css

tr:nth-child(even) {
    background-color: #000000;
}

javascript

 $(document).ready(function()
    {
      $("tr:even").css("background-color", "#000000");
    });

或者

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}