• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > 一起认识一下CSS样式的优先级

    一起认识一下CSS样式的优先级

    作者: 分类:HTML5与CSS3.0 点击: 339 次
    wordpress CMS主题:ssmay主题

      一般情况下,使用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag ,另外,另外在同级样式按照申明的顺序后出现的样式具有高优先级。

      !important > style > [ id > class > tag ]

      原则一:代码从上到下,后出现的样式优先于先出现的同一样式。例:

      <style type=”text/css”>
      .def1{background:black;}
      .def2{background:yellow; }
      </style>
      <div class=” def2 def1″>测试1</div>

      结果:所有浏览器均yellow色,注意:与class=”” 引号内的顺序无关,只看.def1和.def2在声明时的顺序,.def2后声明的所以权重高。

      原则二:标签声明(类似div开头) < class声明(以 .开头) < id声明(以#开头)

      以上这三种声明处于不同的量级份量上,div开头相当于1克重,以点开头的相当于1公斤 重,而以#号开头相当于1吨重。例:

      <style type=”text/css”>
      #bb{background:pink}
      .def{background:black;}
      div{background:yellow; }
      </style>
      <div id=”bb” class=”def”>测试2</div>

      结果:所有浏览器均pink色,注意:虽然按优先原则一,后出现的权重高,但那只是在同样重量级下的比较,优先原则二各重量级别就不同了。

      原则三:数量取胜。

      如果同一个样式声明即一个大括号{}由多个 # . 或 div 组成,则权重按出现符号的量级增加。比如:

      #bb #tt #dd {background:red} 则重量等于3吨
      #bb .tt ul.dd li {background:red} 则重量等于1吨2公斤2克,这么精确的重量,就不需要举例了吧。

      再次说明:优先原则一只适用两个样式声明同样重的情况。

      原则四:!important

      相当于无限重量,在之前已经有说明,需要注意:ie下,在同一条样式声明即一个大括号中出现的!important 会被随后出现的同名样式冲洗掉。

      <style type=”text/css”>
      .def1{background:yellow !important;background:red;}
      .def2{background:green;}
      </style>
      <div class=”def1 def2 “>dd</div>

      结果:ie下,green色,background:yellow !important被后面的background:red冲洗了,而background:red与background:green的较量中,前者败在优先原则一之下。

      原则五:近水楼台。

      <div style=”background:black”></div>直接写在元素体内的style优先级别最高!(仅次于!important)用重量来形容,可以定为百万吨量级。

      <style type=”text/css”>
      .def1{ background:red;}
      </style>
      <div class=”def1 ” style=”background:black”>dd</div>

      结果:black色。

      <style type=”text/css”>
      .def1{ background:red !important;}
      </style>
      <div class=”def1 ” style=”background:black”>dd</div>

      结果:red色。

      <style type=”text/css”>
      .def1{ background:red !important;}
      </style>
      <div class=”def1 ” style=”background:black !important”>dd</div>

      结果:black色。



      QQ二维码

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

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

    或许你会感兴趣的文章:

    2条回应:“一起认识一下CSS样式的优先级”

    1. tyh说道:

      最后一条

    2. tyh说道:

      我是来赚积分的

    发表评论

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

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