css - 无法使第 n 个 child 与 IE8 一起工作

Question

我有以下内容来替换表格中的颜色:

#grid tr:nth-child(odd)    { background-color:#eee; }
#grid tr:nth-child(even)   { background-color:#fff; }

但是，这在 Firefox 中有效，但在 IE8 中无效。经过一些研究，我尝试了以下方法:

CSS:

#grid tr.odd    { background-color:#eee; }
#grid tr.even   { background-color:#fff; }

jQuery:

$(document).ready(function() {
    $("#grid tr:nth-child(even)").addClass("even");
    $("#grid tr:nth-child(odd)").addClass("odd");
});

但它不起作用(实际上，它甚至在 Firefox 中都不起作用)。关于我还能做什么的任何想法(无需使用第三方 js，例如 Selectivizr)？

谢谢!

Answer 1

我会这样做: CSS:

#grid tr {background-color: red;}
#grid tr:nth-child(even),
#grid tr.even { background-color:green;}

JS:

$(document).ready(function(){
    $('#grid tr:odd').addClass('even');
}