关于CSS选择器的权重计算

CSS选择器的权重计算公式大概如下：

1. 内联样式表的权值最高为 1000；

2. ID 选择器的权值为 100

3. Class 类选择器、属性选择器、伪类的权值为 10

4. HTML 元素选择器、伪元素的权值为 1

5. 加有!important的权值最大，优先级最高

对选择器的权值计算只需要将所有选择器类型的权值相加，权值越大则优先级越高，CSS效果会显示权值大的，忽略权值小的。

*{}  /*通用选择器，权值为0 */
p{color:red;} /*标签，权值为1*/
p span{color:green;} /*两个标签，权值为1+1=2*/
p>span{color:purple;}/*权值与上面的相同，因此采取就近原则*/
li{}  /*标签，权值为1*/
li:first-line {}  /*标签和伪元素，权值为1+1=2*/
a:hover{}/*标签和伪类，权值为1+10=11*/
.warning{color:white;} /*类选择符，权值为10*/
p span .warning{color:purple;} /*权值为1+1+10=12*/
h1+a[rel=up]{}/*标签和属性选择器，权值为1+10=11*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
p{color:red!important; }      /*!important要写在分号前,优先级最高*/

需要注意权值计算要基于选择器的形式。特别是，“[id=p33]”形式的选择器被视为属性选择器(权值为10)，即使id属性在源文档的文档类型中被定义为“id选择器”。

W3C中CSS选择器汇总：CSS选择器参考手册