为您解读CSS优先级
http://www.68design.net/Web-Guide/HTMLCSS/43761-1.html

HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0（后面会讲到）。

  • 文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red">blah</div>的样式，而外部定义指经由<link>或<style& gt;卷标定义的规则。
  • 有!important声明的规则高于一切。
  • 如果!important声明冲突，则比较优先权。
  • 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
  • 由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
  • 关于经由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。

还需要说一下，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其它规则定义之前的，这可能会引发一些误会。

优先权问题看起来简单，但背后还是有非常复杂的机制，在实际应用中需要多多留意。
 



CSS优先级你知道怎么用吗？
http://www.webjx.com/css/divcss-15276.html

css优先级的四大原则：
原则一： 继承不如指定
原则二： #ID > .class > 标签选择符
原则三：越具体越强大;
原则四：标签#id >#id ; 标签.class > .class.

四大原则的权重就是: 原则一 > 原则二 > 原则三 > 原则四

一般情况下：

[1位重要标志位] > [4位特殊性标志] > 声明先后顺序

!important > [ id > class > tag ] 

使用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外，另外在同级样式按照申明的顺序后出现的样式具有高优先级。
­
先来看下!important 这个诡异的东西。


1 <style type="text/css">
2 div{background: red !important; background: blue}
3 </style> ­

除了IE6，其他浏览器都会显示背景为红色，正是!important的作用，意思就是只要我在这里我就是最重要的啦，任何东西都不能取代我，没看见都是一个 ！外加一个英文单词 important 吗？很形象，很贴切了。IE6这里会显示背景为蓝色，并不是IE6不支持!important，而是它会按照样式声明顺序后出现的覆盖前面的，此时它已经不认识!important了，它六亲不认了。这正是广为流传的IE6 hack之一。而如果这样写会正常显示背景为红色：


1 <style type="text/css">
2 div{background: blue; background: red !important; }
3 </style> ­


--------------------------------------------------------------------------------


再来看下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]

关于CSS选择器可以查看W3C或者CSS的手册，不啰嗦了。
注意下 伪类选择器

LVHA伪类,样式按LVHA优先级顺序从右至左覆盖，不同的顺序会产生不同的效果。
a:link - 默认链接样式
a:visited - 已访问链接样式
a:hover - 鼠标悬停样式
a:active - 鼠标点击样式