CSS3在IE8上甚至按不同的颜色排列

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>

我的问题是,当我使用class属性.historyLog i.ie应用Css时

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

IE8不执行它,我会得到的是所有行的相同颜色,无论是偶数还是奇数.但是如果我在不使用表的class属性的情况下应用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');
});

​