专业玩家请移步：http://www.w3.org/TR/CSS2/cascade.html
使用CSS控制页面样式时，常常出现设定的样式被“覆盖”，不能生效的情况。
浏览器是根据如何的优先次序推断CSS样式的优先级的呢？
总结例如以下：
样式的来源
样式有多处来源，有网页开发作者设定的、有浏览器默认的、还有网页用户设定的。各种样式声明逐层叠加，或继承、或覆盖、或叠加计算，影响元素的展现效果。
样式的来源依次有：
1、浏览器默认样式；
2、用户样式。
3、作者链接样式。
4、作者页内嵌入样式（这个要尽量少用）。
5、作者行内样式（这个不是好习惯，要戒掉）。
按来源次序，优先级越来越高。
选择器的特殊性
CSS提供各种选择器，能够通过标签、CSS类或ID选定元素。
选定元素的方式不同，优先级也不同。
特殊性按四个维度数计算，设为a、b、c、d，从a到d逐个比較，前面维度的优先级胜出，后面的就不用比了。
四个维度指的是：
a——行内样式；
b——通过id指定。
c——通过类或属性指定；
d——通过标签或伪类指定。
比較方法就是数个数。
举比例如以下（官方样例）：
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
样例中。特殊性自上而下逐次增大。
假设这些选择器都指到同一个元素上，设定的同一个属性。选择特殊性大的样式生效。
假设不幸平局，后声明的生效。
优先原则
优先原则即层叠原则是“层叠样式表”的核心机制。也是CSS名称的由来。
优先原则包含三条：
1、先看特殊性。
2、再看规则来源。
3、直接设定的大于继承来的（特殊性再高，假设仅仅是选择了父元素，或祖先元素，那直接对当前元素的设定生效）。
最后，永远不要用“!important;”。