CSS IE：nth-child() 使用奇数/偶数不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8189182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE: nth-child() using odd/even isn't working
提问by ajax333221
My table (that works perfectly on Chrome, FireFox and Opera) is not displaying correctly on Internet Explorer.
我的表格（在 Chrome、FireFox 和 Opera 上完美运行）在 Internet Explorer 上显示不正确。
The background remains white! (I am using IE-8)
背景保持白色！（我正在使用 IE-8）
CSS code:
CSS代码：
/*My Table*/
.my_table{
border-collapse:collapse;
font:normal 14px sans-serif,tahoma,arial,verdana;
margin:5px 0;
}
.my_table th{
color:#fff;
background:#5E738A;
border:1px solid #3C5169;
text-align:center;
padding:4px 10px;
}
.my_table td{
color:#555;
border:1px solid #C1CAD4;
text-align:center;
padding:2px 5px;
}
.my_table tr:nth-child(even){
background:#E6EDF5;
}
.my_table tr:nth-child(odd){
background:#F0F5FA;
}
采纳答案by Clive
IE8 doesn't support the nth-childselector I'm afraid:
IE8 不支持nth-child选择器恐怕：
回答by Abdul Munim
As a good workaround, jQuery has added this to their project and achieving this using JavaScript is acceptable:
作为一个很好的解决方法，jQuery 已将其添加到他们的项目中，并且使用 JavaScript 实现这一点是可以接受的：
For my CSS, I would have
对于我的 CSS，我会有
.my_table tr.even{
background:#E6EDF5;
}
.my_table tr.odd{
background:#F0F5FA;
}
And I would use jQuery to do this:
我会使用 jQuery 来做到这一点：
$(document).ready(function() {
$(".my_table tr:nth-child(even)").addClass("even");
$(".my_table tr:nth-child(odd)").addClass("odd");
});
回答by user1613229
You can use first-child and "+" to emulate nth-child, example:
您可以使用 first-child 和 "+" 来模拟 nth-child，例如：
tr > td:first-child + td + td + td + td + td + td + td + td {
background-color: red;
}
That select the 9th column, just like nth-child(9), and that works on IE
选择第 9 列，就像 nth-child(9) 一样，适用于 IE
回答by Alfredo Carrillo
This is the Dojo version, it works fine:
这是 Dojo 版本，它工作正常：
dojo.addOnLoad(function(){
dojo.query("table tr:nth-child(odd)").addClass("odd");
dojo.query("table tr:nth-child(even)").addClass("even");
});
回答by yckart
I made some time ago, a prude simple javascript solution for this problem:
我前段时间为这个问题做了一个简单的javascript解决方案：
https://gist.github.com/yckart/5652296
https://gist.github.com/yckart/5652296
var nthChild = function (elem, num) {
var len = elem.length;
var ret = [];
var i = 0;
// :nth-child(num)
if (!isNaN(Number(num))) {
for (i = 0; i < len; i++) {
if (i === num - 1) return elem[i];
}
}
// :nth-child(numn+num)
if (num.indexOf('+') > 0) {
var parts = num.match(/\w/g);
for (i = parts[2] - 1; i < len; i += parts[0] << 0) {
if (elem[i]) ret.push(elem[i]);
}
}
// :nth-child(odd)
if (num === 'odd') {
for (i = 0; i < len; i += 2) {
ret.push(elem[i]);
}
}
// :nth-child(even)
if (num === 'even') {
for (i = 1; i < len; i += 2) {
ret.push(elem[i]);
}
}
return ret;
};
The usage is quite simple and similar to the css-selector:
用法非常简单，类似于 css-selector：
var rows = document.querySelectorAll('li');
var num = nthChild(rows, 2);
var formula = nthChild(rows, '3n+1');
var even = nthChild(rows, 'even');
var odd = nthChild(rows, 'odd');
// Note, forEach needs to be polyfilled for oldIE
even.forEach(function (li) {
li.className += ' even';
});
odd.forEach(function (li) {
li.className += 'odd';
});
formula.forEach(function (li) {
li.className += ' formula';
});
num.style.backgroundColor = 'black';
