IE：使用奇数/偶数的 nth-child() 不起作用

Posted 2023-03-06

【中文标题】IE：使用奇数/偶数的 nth-child() 不起作用

【英文标题】：IE: nth-child() using odd/even isn't working

【发布时间】：2012-01-01 14:47:16

【问题描述】：

我的表格（在 Chrome、FireFox 和 Opera 上完美运行）在 Internet Explorer 上显示不正确。

背景保持白色！ （我使用的是 IE-8）

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;

【问题讨论】：

IE8 不支持:nth-child()。

【参考方案1】：

恐怕IE8不支持nth-child选择器：

http://reference.sitepoint.com/css/pseudoclass-nthchild

【参考方案2】：

作为一个很好的解决方法，jQuery 已将其添加到他们的项目中，并且使用 javascript 实现这一点是可以接受的：

对于我的 CSS，我会拥有

.my_table tr.even
    background:#E6EDF5;


.my_table tr.odd
    background:#F0F5FA;

我会使用 jQuery 来做到这一点：

$(document).ready(function() 
    $(".my_table tr:nth-child(even)").addClass("even");
    $(".my_table tr:nth-child(odd)").addClass("odd");
);

【讨论】：

这才是真正的答案！

【参考方案3】：

您可以使用 first-child 和“+”来模拟 nth-child，例如：

tr > td:first-child + td + td + td + td + td + td + td + td 
    background-color: red;

选择第 9 列，就像 nth-child(9)，在 IE 上工作

【讨论】：

天哪，这真是个选择器！

这只有在您确切知道要定位的元素时才有效。期望的效果是选择每个奇数和每个偶数 tr，尽管有 tr 的总数。

DV：我不能让它工作。有人可以制作小提琴吗？

【参考方案4】：

这是 Dojo 版本，运行良好：

  dojo.addOnLoad(function()
      dojo.query("table tr:nth-child(odd)").addClass("odd");
      dojo.query("table tr:nth-child(even)").addClass("even");
  );

【讨论】：

我从来没有写过dojo，但是一行使用addClass而另一行使用addStyle似乎不对

那是我发帖的错字，正确的方法是使用 addClass。感谢您指出。我编辑了帖子，现在它显示了两者的正确方法。

【参考方案5】：

我前段时间为这个问题做了一个严谨简单的javascript解决方案：

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;
;

用法很简单，类似于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';

http://jsfiddle.net/ARTsinn/s3KLz/