如何让IE浏览器兼容CSS的:nth-child(n)伪类？

扫描下面的二维码，“关注”我的百家号。

前面的文章中我们介绍过CSS中非常有用的一个标签伪类 :nth-child(n)，这个伪类在我们的网页中的一些特效中会用到，比如：表格的隔行变色、导航菜单的分隔符等。这些都可以让我们的网页不再单调而与众不同。但是，:nth-child(n)有一个它至命的弱点，就是IE浏览器不支持。而国内使用IE浏览器的用户还是非常多，为了不流失这部分用户，我们必须要解决这个问题。那么，怎样让IE浏览器能兼容CSS的 :nth-child(n)呢？

网上有很多解决方法，这里我只介绍我用过的方法——通过jquery的选择器nth-child来实现。

这里以隔行变色为例，做一个示范。

1、html代码：

<ul>
<li>css伪类:nth-child(n) 隔行变色效果：白色。</li>
<li>css伪类:nth-child(n) 隔行变色效果：红色。</li>
<li>css伪类:nth-child(n) 隔行变色效果：白色。</li>
<li>css伪类:nth-child(n) 隔行变色效果：红色。</li>
<li>css伪类:nth-child(n) 隔行变色效果：白色。</li>
<li>css伪类:nth-child(n) 隔行变色效果：红色。</li>
<li>css伪类:nth-child(n) 隔行变色效果：白色。</li>
<li>css伪类:nth-child(n) 隔行变色效果：红色。</li>
</ul>

2、我们通过jquery来给上段代码中的标签li的偶数添加class属性，

<script src="/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("tr:odd").addClass("oddcss"); //偶数
$("tr:even").addClass("evencss"); //奇数
});
</script>

因为要用到jquery库，所以我们必需要添加第一句，下面的jquery语句才会起到作用。上面代码中的 $("tr:odd").addClass("oddcss");语句的意思是“给表格的行（ tr）的偶数行添加class属性 class="oddcss"，这里的odd跟nth-child(2n)是一个意思，你也可以把它替换成nth-child(2n)。后面的一句跟这句意思是一样，只是选择是奇数行。

3、这偶数行添加CSS样式。

<style>
tr.oddcss{ background:red; }
tr.evencss{ background:#fff; }
</style>

上面代码意思，给偶数行添加背景色为红色，给奇数行添加背景色为白色。

通过上面几部，我们就可以在IE上兼容使用到了nth-child(n)伪类，达到我们在其实浏览器上同样的隔行变色的效果。当然，我们还可以实现其它的特色效果，根据你自己的需求来做吧。