样式的优先级优先原则一:文本从上到下,后声明的样式优先于前面出现的同一样式例:.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样式。