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

Posted 2021-04-14

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

答案

您可以使用支持IE的css3选择器的http://selectivizr.com/ JS。

另一答案

使用polyfill：Selectivizr足够好。

没有polyfill：由于IE8支持first-child，你可以欺骗它来支持iE8中的n-child，即

/*li:nth-child(2)*/
li:first-child + li {}/*Works for IE8*/

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

另一答案

作为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;
}

另一答案

'first-child'和'+'选择器都可以在IE7中使用，'+'是可添加的。

因此，可以通过连续添加“+”选择器来模拟“n-child”，因此：

tr:nth-child(4)

变为：

tr:first-child + tr + tr + tr

如果所有兄弟元素都相同，则'*'通配符就足够了，如：

tr:first-child + * + * + *

如果指定了很多行，这将减少css文件的大小。

请注意，选择器之间的空格不是必需的，因此可以通过将文件大小删除来进一步减小文件大小，因此要选择第1行，第3行和第5行：

tr:first-child,tr:first-child+*+*,tr:first-child+*+*+*+*

当然，人们不想满足非常大的桌子！

如果使用*作为填充符，请确保:first-child元素和最后一个元素被赋予显式标记名，因为将针对DOM中的每个元素测试该规则，并指定这两个元素明确强制在特定浏览器的任何一端失败首先应用它的规则，而不是在它必须跨越每个序列中的几个元素以最终使每个元素的规则失败之后失败。不要让你的浏览器无故工作！