样式的优先级

在这之前先讲解特殊符号的含义——‘+’ ’_’ ’ !important’，这类特殊符号是针对不同浏览器识别的。打个比方，就象家长去幼儿园认领孩子，看到头上贴着’+’这个符号的，哦，这是ie家的孩子，firefox和opear家长是不认得的，当然符号不止3个，但有这3个就能满足大部分的需要了。

‘+’ 加上该符号的样式只有ie才会认领

‘_’ 加上该符号的样式只有ie6才会认领，ie7不会认领

‘!important’ 在同一条样式定义中即大括号{}中，firefox、opera优先认领，ie不认得即忽略’!important’字符串。在非同一条样式中即不同的大括号中{}标有‘!important’的样式对所有浏览器均属优先认领。网上有说ie不认‘!important’的，大错特错了。

例：

.def{background:yellow;+background:blue;_background:red;}

dd

结果：ie6下是red色，ie7下是blue色，firefox和opera下是yellow色

例：

.def2{background:black !important;}

.def1{background:yellow;+background:blue;_background:red;}

dd

结果：所有浏览器均black色

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

例：

.def1{background:black;}

.def2{background:yellow; }

dd

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

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

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

例：

#bb{background:pink}

.def{background:black;}

div{background:yellow; }

dd

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

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

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

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

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

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

.def1{background:yellow !important;background:red;}

.def2{background:green;}

dd

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

优先原则五：近水楼台。

直接写在元素体内的style优先级别最高！（仅次于!important）用重量来形容，可以定为百万吨量级。

.def1{ background:red;}

dd

结果：black色。

.def1{ background:red !important;}

dd

结果：red色。

.def1{ background:red !important;}

dd

结果：black色。

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

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

from:http://www.aliued.cn/339