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

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

    作者: 分类:网站建设 点击: 9,846 次
    wordpress CMS主题:ssmay主题

      前面的文章中我们介绍过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)伪类,达到我们在其实浏览器上同样的隔行变色的效果。当然,我们还可以实现其它的特色效果,根据你自己的需求来做吧。



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.