- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
前面的文章中我们介绍过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)伪类,达到我们在其实浏览器上同样的隔行变色的效果。当然,我们还可以实现其它的特色效果,根据你自己的需求来做吧。