对于CSS的优先级样式一般情况下：
[1位重要标志位] > [4位特殊性标志] > 声明先后顺序
!important > [ id > class > tag ] ，使用!important可以改变优先级别为最高，其他的样式一律让路。其次是style对象，然后是id > class >tag ，另外在同级样式按照申明的顺序最后出现的样式具有高优先级。不过！important奇葩的IE6是不支持的。
!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]
从左至右，每次给某一个位置+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]