·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]据说这是alibaba前端的css设计规则(技术文章分享)(2)

时间:2017-03-16 13:01酷播
优先原则一:文本从上到下,后出现的样式优先于前面出现的同一样式 例: style type =text/css .def1{background:black;} .def2{background:yellow;} / style div class =def2def1 dd / div 结果:所有浏览器均yell

    优先原则一:文本从上到下,后出现的样式优先于前面出现的同一样式
    例:

  1. <style type=”text/css”> 
  2.  
  3. .def1{background:black;} 
  4.  
  5. .def2{background:yellow; } 
  6.  
  7. </style> 
  8.  
  9. <div class=” def2 def1″>dd</div> 

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

    优先原则二:id声明(即 # 开头的样式)> class声明(即 . 开头的样式)> 标签声明(即 类似 div 开头)

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

  1. <style type=”text/css”> 
  2.  
  3. #bb{background:pink} 
  4.  
  5. .def{background:black;} 
  6.  
  7. div{background:yellow; } 
  8.  
  9. </style> 
  10.  
  11. <div id=”bb” class=”def”>dd</div> 

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

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

    比如:#bb #tt #dd {background:red} 则重量等于3吨

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

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

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

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

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

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

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

    结果:black色。

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

    结果:red色。

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

    结果:black色。

    注释:!important 的无限重量说不太通,大家知道,两个无限的数是没法比较大小的,如果两个样式定义都加了!important,是否就无法比较呢?

    不是的,所以,请将!important的无限重量级理解成千万吨级别吧。

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器