如何让 Internet Explorer 8 支持第 n 个 child() CSS 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10577674/
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
How to make Internet Explorer 8 to support nth child() CSS element?
提问by surajR
I want to give a zebra stripe effect to my table rows. In all other browsers it can be done using CSS nth child element. But i want to do it IE 8 also. SO how can i do it?
我想给我的表格行一个斑马条纹效果。在所有其他浏览器中，它可以使用 CSS 第 n 个子元素来完成。但我也想这样做 IE 8。所以我该怎么做？
采纳答案by sandeep
You can use http://selectivizr.com/JS which support css3 selector for IE.
您可以使用支持 IE 的 css3 选择器的http://selectivizr.com/JS。
回答by Samar Panda
With polyfill : Selectivizris good enough.
使用 polyfill：Selectivizr就足够了。
Without polyfill: As IE8 supports first-child you can trick this to support nth-child in iE8 i.e
不使用 polyfill：由于 IE8 支持第一个孩子，您可以欺骗它以支持 iE8 中的第一个孩子，即
/*li:nth-child(2)*/
li:first-child + li {}/*Works for IE8*/
Although we cannot emulate complex selectors i.e nth-child(2n+1) or nth-child(odd) for IE8.
尽管我们无法模拟 IE8 的复杂选择器，即 nth-child(2n+1) 或 nth-child(odd)。
回答by Jonathan
As an alternative to Selectivizr, you can use a little jQuery:
作为 Selectivizr 的替代方案，您可以使用一些 jQuery：
$('.your-list li:nth-child(3n+1)').addClass('nth-child-3np1');
Then just add a second selector in your CSS:
然后只需在您的 CSS 中添加第二个选择器：
:nth-child(3n+1)
{
clear: both;
}
.nth-child-3np1
{
clear: both;
}
回答by Patanjali
The 'first-child' and '+' selectors are both available in IE7, and the '+' is additive.
'first-child' 和 '+' 选择器在 IE7 中都可用，而 '+' 是附加的。
Therefore 'nth-child' can be simulated by successively adding '+' selectors, so:
因此可以通过连续添加 '+' 选择器来模拟 'nth-child'，因此：
tr:nth-child(4)
becomes:
变成：
tr:first-child + tr + tr + tr
If all sibling elements are the same, then the '*' wildcard will suffice, as in:
如果所有同级元素都相同，则“*”通配符就足够了，如下所示：
tr:first-child + * + * + *
which will reduce the css file size if specifying lots of rows.
如果指定大量行，这将减少 css 文件大小。
Note that spaces between selectors are not required, so the file size can be reduced further by leaving them out, so to select the 1st, 3rd and 5th rows:
请注意，选择器之间不需要空格，因此可以通过将它们排除在外来进一步减小文件大小，因此选择第 1、3 和 5 行：
tr:first-child,tr:first-child+*+*,tr:first-child+*+*+*+*
Of course one would not want to cater for very large tables!
当然，人们不想满足非常大的桌子！
If using the *as a filler, make sure the :first-childelement and the last element is given the explicit tagname, because the rule will be tested against every element in the DOM, and specifying both those elements explicitly forces failure at whichever end a particular browser applies its rules to first, rather than failing after it has had to step over several elements in every sequence to eventually fail the rule for each of them. Don't make your browser work for no good reason!
如果使用 the*作为填充符，请确保为:first-child元素和最后一个元素指定了明确的标记名，因为将针对 DOM 中的每个元素测试该规则，并且明确指定这两个元素会在特定浏览器应用其的任何一端强制失败规则，而不是在它不得不遍历每个序列中的几个元素以最终使每个元素的规则失败后失败。不要让您的浏览器无缘无故地工作！
