internet-explorer - IE8上的CSS3奇偶行不同颜色

Question

我有用不同颜色区分奇数行和偶数行的 Css 代码

.historyLog tr:nth-child(odd) td {
background-color:blue;
}
.historyLog tr.odd td{
    background-color: blue;
}
​
.historyLog tr:nth-child(even) td {
background-color:orange;
}
.historyLog tr.even td{
    background-color: orange;
}

并有类 .historyLog 的表

<table class="historyLog">
<tr><td></td></tr>
<tr><td></td></tr>
</table>

我的问题是，当我使用类属性 .historyLog i.ie 应用 Css

.historyLog tr:nth-child(odd) td {
background-color:blue;
}

IE8 不执行它，我将得到所有行的颜色相同，无论是偶数还是奇数。但是如果我在不使用表的类属性的情况下应用 css，即

tr:nth-child(odd) td {
background-color:blue;
}

然后IE8以不同颜色的奇偶行执行它。请帮助我回答IE8如何使用table的class属性以不同的颜色显示奇数行和偶数行。

Answer 1

由于 IE8 不支持 CSS3 选择器。您可以很好地使用 jQuery 的内置 :odd 或 :even 选择器来实现相同的功能。

$(".historyLog tr:odd").css('background-color','blue');
$(".historyLog tr:even").css('background-color','white');

或者您可以改用 css 类文件

$(".historyLog tr:odd").addClass("odd");
$(".historyLog tr:even").addClass("even");

Answer 2

你不能，因为 IE8 不支持 CSS3。

你可以用 jQuery 做到这一点：

$('tr').each(function(){
    if ($(this).index()%2<1)
        $(this).addClass('even');
});

​</p>