wordpress CMS主题 微信
Home > 网站建设 > 如何让IE浏览器兼容CSS的:nth-child(n)伪类?

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

高时银博客 网站建设 点击: 7,264 次 0 0
  • 标签:
  • 前面的文章中我们介绍过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)伪类,达到我们在其实浏览器上同样的隔行变色的效果。当然,我们还可以实现其它的特色效果,根据你自己的需求来做吧。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201508094768.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论