Question

我想以不同的颜色显示备用行。我在CSS中指定了颜色。并且大多数行都正常工作。当我检查时，行正在具有class =＆＃34; odd＆＃34;或者类=＆＃34;偶数＆＃34;但是有些行有class =＆＃34;奇数偶数＆＃34;和class =＆＃34;甚至奇数＆＃34;。怎么回事？任何人都可以解释为什么它正在把这个班级当作“和平”＃34;或者＆＃34;甚至奇数＆＃34;。提前致谢。

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

尝试css

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

的javascript

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

OR

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

Answer 3

如果你必须支持旧浏览器（如IE8），那么nth-child就不起作用了。一个简单的workarround将结合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（添加类）以获得性能。

替代行颜色

3 个答案: