CSS选择器权重计算规则

优先级就是分配给指定的CSS声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

选择器类型

选择器可以分成几个大类

①基本选择器

基本选择器是我们用的最多的选择器，包括：
1.元素（类型）选择器
2.类选择器
3.ID选择器
4.通用元素选择器

②组合选择器
组合选择器包含了是包含了简单选择符的组合方式，包括：

1.群组选择器

语法： 选择器A,选择器B{样式规则}
作用：对N个选择器获取的dom元素应用同一个样式，减少重复代码。
例如：
div,body{width: 1200px;}

2.后代选择器(派生选择器)

语法： 父选择器 后代选择器{样式规则}
作用：对父类元素中所有子代元素应该样式规则
例如：
body div{color: #888;}

3.子元素选择器(派生选择器)

语法： 父选择器 > 子元素选择器{样式规则}
作用：对父类元素的直接子元素应该样式规则
例如：
body > div{color: #888;}

4.相邻兄弟元素选择器

语法： 选择器A + 选择器B {样式规则}
作用：可选择紧接在另一元素后的元素，且二者有相同父元素
用法：这个选择器的有两种(本质上是一种)，详细的用法点击这里

5.兄弟选择器(派生选择器)

语法：选择器A ~ 选择器B{样式规则}
作用：对某个指定元素的后面的所有兄弟元素应用样式规则
例如：
body ~ div{color: #888;}

③属性选择器
例如：[attr=value]
④伪类选择器
例如：:hover
⑤伪元素选择器
例如：:before

计算规则

1.基本规则

行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式

2.组合规则

选择器类型	纬度（a,b,c,d）
行内样式	1,0,0,0
ID选择器	0,1,0,0
类选择器、属性选择器、伪类选择器	0,0,1,0
元素（类型）选择器，伪元素（类型）选择器	0,0,0,1
通用元素选择器、伪类:not选择器	0,0,0,0

3.计算流程

(a)首先根据选择器类型计算出总纬度
(b)若纬度相同则比较来源
(c)若前两者相同，则后面声明的优先级高。

4.通过!important提高优先级

通过在样式规则后面添加!important关键词，可以将该样式规则提高到最高优先级。(IE5.5~6不支持)
!important不是一个优雅的办法，而且会使得样式难以调试，下面是时是使用建议：

1. 永远不要在全局CSS规则中使用;
2. 永远不要在自制的插件中使用;
3. 只在需要覆盖全局或外部插件的css规则（如Extjs、YUI插件的样式）的特定页面中才使用;
4. 首先考虑使用优先级来解决问题而不是!important.

文章来源：http://www.cnblogs.com/fsjohnhuang/p/3940732.html
本文转载只转载其中的部分内容，有兴趣的同学可以去原地址查看详细的内容。