如何使Internet Explorer 8支持第n个child（）CSS元素？

Question

我想给我的表行一个斑马条纹效果。在所有其他浏览器中，都可以使用CSS的第n个子元素来完成。但是我也想做IE 8。那我该怎么办呢？

Answer 1

使用polyfill：Selectivizr足够好。

没有polyfill：由于IE8支持第一个孩子，您可以欺骗它以在iE8中支持第n个孩子，即

/*li:nth-child(2)*/

li:first-child + li {}/*Works for IE8*/

尽管我们无法模拟IE8的复杂选择器，即nth-child（2n + 1）或nth-child（odd）。

Answer 2

作为Selectivizr的替代方法，可以使用一些jQuery：

$('.your-list li:nth-child(3n+1)').addClass('nth-child-3np1');

然后只需在CSS中添加第二个选择器：

:nth-child(3n+1)

{

    clear: both;

}

.nth-child-3np1

{

    clear: both;

}