Question

一次性向所有IE版本提供支持nth-child的最佳方法是什么？

我想给这样的风格。对于某些特定页面。

#products tr:nth-child(even) {
  background-color: red;
}


#products tr:nth-child(odd) {
  background-color: white;
}

Answer 1

你可以在javascript中完成。

var table = document.getElementById('products');

var rows = table.getElementsByTagName('tr');

for (var i = 0; i < rows.length; ++i)
{
   if ( (i % 2) == 0 )
   {
       rows[i].className = 'even';
   }
}

然后像这样做你的CSS：

#products tr td
{
    background-color: white;
}

#products tr.even td
{
    background-color: red;
}

如果您使用过javascript库，则可以这样做：

$('#products tr:even').addClass('even');

Answer 2

That project为这些以及许多其他CSS3选择器提供至少IE7 / 8的“原生”支持。

但是在这里你会遇到IE7的问题，它不支持background-color的{{1}}。

Answer 3

我做了一些适用于每个浏览器的东西： https://gist.github.com/yckart/5652296

var nthChild = function (elem, num) {
    var len = elem.length;
    var ret = [];

    // :nth-child(num)
    if (!isNaN(Number(num))) {
        for (var 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 (var i = parts[2] - 1; i < len; i += parts[0] << 0) {
            if (elem[i]) ret.push(elem[i]);
        }
    }

    // :nth-child(odd)
    if (num === "odd") {
        for (var i = 0; i < len; i += 2) {
            ret.push(elem[i]);
        }
    }

    // :nth-child(even)
    if (num === "even") {
        for (var i = 1; i < len; i += 2) {
            ret.push(elem[i]);
        }
    }

    return ret;
};


var rows = document.getElementsByTagName('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";

Answer 4

您也可以在jQuery中执行此操作，它们可能已经解决了您的跨浏览器问题。

$('#products').children('tr:even').css('background-color', 'red');
$('#products').children('tr:odd').css('background-color', 'white');

在所有IE版本中一次性支持“n-child”的最佳方法是什么？

4 个答案: