风言枫语  

对于CSS的优先级样式一般情况下:

[1位重要标志位] > [4位特殊性标志] > 声明先后顺序
!important > [ id > class > tag ] ,使用!important可以改变优先级别为最高,其他的样式一律让路。其次是style对象,然后是id > class >tag ,另外在同级样式按照申明的顺序最后出现的样式具有高优先级。不过!important奇葩的IE6是不支持的。
 
再来看下4位特殊性标志 [0.0.0.0]
从左至右,每次给某一个位置+1,前一段对后一段具有无可辩驳的压倒性优势。无论后一位数值有多大永远无法超过前一位的1。
1.内联样式 [1.0.0.0] 
A:<span id="demo" style="color:red "></span>
B:还有就是JS控制的内联样式style对象,document.getElementById("demo").style.color="red";
这两者属于同一级别,不过一般情况是JS控制的内联样式优先级高,这与先后顺序申明有关系与本质无关,因为往往DOM操作是在DOM树加载完毕之后。
2,ID选择器 [0.1.0.0]
3,类,属性,伪类 选择器 [0.0.1.0]
4,元素标签,伪元素 选择器 [0.0.0.1]

 

posted on 2013-09-01 00:15  风言枫语  阅读(304)  评论(0编辑  收藏  举报