[置顶] CSS选择器的权重及优先级

最近在牛客网上刷题遇到过各类选择器优先级的比较问题，经查阅，现总结如下：
总体来说：内联样式 > id>class=属性选择器=伪类选择器=伪元素选择器>标签，大致分为四个等级：
一等：代表内联样式，如: style=””，权值为1000；
二等：代表ID选择器，如：#content，权值为100；
三等：代表类，伪类和属性选择器，如.content，权值为10；
四等：代表类型选择器和伪元素选择器，如div p，权值为1；
下图是一些计算实例：


注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。我们再来看一个具体的例子：假如有以下样式规则，判断HTML代码中的两个标题是什么颜色？

01	#content div#main-content h 2 {

02	color : red ;

03

}

04

05	#content #main-content>h 2 {

06	color : blue

07

}

08

09	#main-content div.paragraph h 2 {

10	color :orange;

11

}

12	#main-content [class= "paragraph" ] h 2 {

13	color :yellow;

14

}

15	div#main-content div.paragraph h 2 .first{

16	color :pink;

17

}

以下是HTML代码：

01	< div   id = "content" >

02	< div   id = "main-content" >

03	< h2 >CSS简介</ h2 >

04

05	< div   class = "paragraph" >

06	< h2   class = "first" >使用CSS布局的优点</ h2 >

07

08

</ div >

09

</ div >

10

</ div >

答案是：两个标题都是红色的！让我们来一起算算六个样式规则各自的特殊性的值：第一个特殊性的值=2*100+2*1=202
第二个特殊性的值=2*100+1=201
第三个特殊性的值=1*100+1*10+2*1=112
第四个特殊性的值=1*100+1*10+1*1=111
第五个特殊性的值=1*100+2*10+3*1=123
清楚了吧，第一个样式规则以其202的高分一举夺得了本次样式选择器特殊性大赛的冠军，后面一些规则虽然看起来好像更复杂，但特殊性并不是拼谁的选择器表达式写得更长，ID选择器才是王道！这里使用图文的形式，讲解各个选择器的权重及优先级规则的使用，直观且容易理解，希望对大家有所帮助！参考：http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php