谈到CSS优先级别:从两个层面来谈:
第一层面,就是从宏观的层面上谈,CSS样式优先级别,就是
行内样式 > 植入样式(就是写在页面style里的样式) >链接样式 >导入样式 >浏览器默认的样式
第二层面,就是在第一个层面的样式级别里某一个阶段,举例子说,在植入样式这级别上,有5大优先法则;
优先原则一:文本从上到下,后出现的样式优先于前面出现的同一样式
例:
<style type=”text/css”>
.def1{background:black;}
.def2{background:yellow; }
</style>
<div class=” def2 def1″>测试1</div>
结果:所有浏览器均yellow色,注意:与class=”” 引号内的顺序无关,只看.def1和.def2在声明时的顺序,.def2后声明的所以权重高。
优先原则二:id声明(即 # 开头的样式)> class声明(即 . 开头的样式)> 标签声明(即 类似 div 开头)
以上三种声明处于不同的量级,份量上,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色。
一谈样式的级别,有时候,还和浏览器有关系,上述的CSS样式优先级别知识,在大部分场合没问题,但是不是一定对。
所有请各位读者,这个只是给你一个CSS相对正确的知识。大胆用,一般,浏览器都支持的。出了问题,你也知道有这个原因。就OK!本来本人认为这个世界没真假之分,对错之道理。对与错,用了才知道!真理是用出来的。