css样式优先级

样式的优先级优先原则一：文本从上到下，后声明的样式优先于前面出现的同一样式例：.a{background：black;}.b{background：yellow; }<div class=” b a″>dd</div>结果：所有浏览器均yellow色，注意：与class=”” 引号内的顺序无关，只看.def1和.def2在声明时的顺序，.def2后声明，所以权重高。  
优先原则二：id声明 > class声明 > 标签声明(即HTML固有标签，例如 div)

例：#a{background:pink}

.b{background:black;}

div{background:yellow; }

<div id=”a” class=”b”>dd</div>

结果：所有浏览器均pink色，注意：虽然按优先原则一，后出现的权重高，但那只是在同样重量级下的比较。  
优先原则三：‘!important’ 相当于无限重量，但在ie6下，同一条样式声明出现的!important 会被随后出现的同名样式覆盖掉。

例：.a{!important background:red; background:yellow ;}

<div class=”a“>dd</div>

结果：ie6下为yellow色，background:red !important被后面的background:yellow覆盖了，所以显示为yellow色，而在火狐和ie7下则显示为red色。  
优先原则四：近水楼台。<div style=”background:black”></div>直接写在元素体内的style优先级别最高，仅次于!important。

例：.a{ background:red !important;}

<div class=”a” style=”background:black”>dd</div>

结果：所有浏览器均显示为red色，因为”!important”的优先级最高，所以会覆盖页面中的style样式。 
例：.a{ background:red !important;}

<div class=”a ” style=”background:black !important”>dd</div>

结果：所有浏览器均显示为black色，因为页面里的style样式优先级要高于调用的CSS样式。