CSS样式表的优先级别

 

引用两篇文章让你更好的理解控制页面css样式

 

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。
Specificity 具体的计算规则：
元素的 style 样式属性，加 1,0,0,0。
每个 ID 选择符（#id），加 0,1,0,0。
每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。
最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。
除了 Specificity 还有一些其他规则：
!important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。
如果优先权一样，则按源码中“后来者居上”的原则。
由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例 全局选择符 * ）。
范例分析：

h1 {color: red;} /* 只有一个普通元素加成，结果是 0,0,0,1 */ body h1 {color: green;} /* 两个普通元素加成，结果是 0,0,0,2 */ /*0,0,0,1 小于 0,0,0,2 ，后者胜出*/ h2.grape {color: purple;} /* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/ h2 {color: silver;} /*一个普通元素，结果是 0,0,0,1 */ /*0,0,1,1 大于 0,0,0,1 ，前者胜出*/ html > body table tr[id=”totals”] td ul > li {color: maroon;} /* 7个普通元素、一个属性选择符、两个其他选择符（子选择符 >），结果是0,0,1,7 */ li#answer {color: navy;} /* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */ /*0,0,1,7 小于 0,1,0,1，后者胜出*/

 

 

 

 

 

 

 

 

 

 

 

 

 

摘自   http://www.cnblogs.com/Hotcocoa/articles/2104147.html

 

谈到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相对正确的知识。

摘自 http://blog.csdn.net/qulijian1234/article/details/4365048