CSS选择器的优先级
要讲CSS选择器的优先级，我们首先要知道CSS选择器有哪些？具体可以参考CSS 选择器参考手册，同时我们还需要知道CSS选择器的解析原则。请阅读为什么CSS选择器是从右往左解析。
在此只为各位列出最常用的几种选择器：
- 标签选择器(如：body,div,p,ul,li)
- 类选择器(如：class="head",对应css选择器为 .head)
- ID选择器(如：id="name",对应css选择器为 #name)
- 组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
- 后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)
- 群组选择器 (如：div,span,img {color:Red} ,注意用逗号隔开)
- 继承选择器(如：div p,注意两选择器用空格键分开)
- 伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。
- 子选择器 (如：div>p ,带大于号>)
当两个规则都作用到了同一个元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的排序。 总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 注意：!important的作用是提升优先级，换句话说，加了这句的样式的优先级是最高的（比内嵌的优先级还高）。同一级别中后写的会覆盖先写的样式 如果遇到选择器组合进行比较，这时就要提到每种选择器的权重，CSS优先级的规则就是权重大的选择器优先于权重小的选择器，我们可以把选择器中如下对应等级做加法，比较权值，如果权值相同那就后面的覆盖前面的。 4个等级的定义如下： 第一等：代表内联样式，如: style=””，权值为1000。 第二等：代表ID选择器，如：#content，权值为100。 第三等：代表类，伪类和属性选择器，如.content，权值为10。 第四等：代表类型选择器和伪元素选择器，如div p，权值为1。 注意：权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高。而通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。
举个栗子：
<style>
#content div#main-content h2 {
color: red;
}
#content #main-content>h2 {
color: blue;
}
body #content div[id="main-content"] h2 {
color: green;
}
#main-content div.paragraph h2 {
color: orange;
}
#main-content [class="paragraph"] h2 {
color: yellow;
}
div#main-content div.paragraph h2.first {
color: pink;
}
</style>
<body>
<div id="content">
<div id="main-content">
<h2>CSS简介</h2>
<p>CSS是一组格式设置规则，用于控制web页面的外观。</p>
<div class="paragraph">
<h2 class="first">使用CSS布局的优点</h2>
<p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的标准</p>
</div>
</div>
</div>
</body>让我们来一起算算栗子中六个样式规则各自的特殊性的值： 第一个特殊性的值=2×100+2×1=202（red） 第二个特殊性的值=2×100+1=201（blue） 第三个特殊性的值=1×100+1×10+3×1=113（green） 第四个特殊性的值=1×100+1×10+2×1=112（orange） 第五个特殊性的值=1×100+1×10+1×1=111（yellow） 第六个特殊性的值=1×100+2×10+3×1=123（pink） 清楚了吧，第一个样式规则以其202的高分一举夺得了本次样式选择器特殊性大赛的冠军，后面一些规则虽然看起来好像更复杂，但特殊性并不是拼谁的选择器表达式写得更长，权重高才是王道！
另外一种理解方式： CSS优先级：是由四个级别和各级别的出现次数决定的。 四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。 优先级的算法： 每个规则对应一个初始"四位数"：0、0、0、0 若是 行内选择符，则加1、0、0、0 若是 ID选择符，则加0、1、0、0 若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0 若是 元素选择符/伪元素选择符，则分别加0、0、0、1 算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
再看个栗子：
<style>
a {
color: yellow;
} /*0,0,0,1*/
div a {
color: green;
} /*0,0,0,2*/
.demo a {
color: black;
} /*0,0,1,1*/
.demo input[type="text"] {
color: blue;
} /*0,0,2,1*/
.demo *[type="text"] {
color: grey;
} /*0,0,2,0*/
#demo a {
color: orange;
} /*0,1,0,1*/
div#demo a {
color: red;
} /*0,1,0,2*/
</style>
<body>
<a href="">第一条应该是黄色</a>
<!--适用第1条CSS规则-->
<div class="demo">
<input type="text" value="第二条应该是蓝色" />
<!--适用第4、5条CSS规则，第4条CSS优先级高-->
<a href="">第三条应该是黑色</a>
<!--适用第2、3条CSS规则，第3条CSS优先级高-->
</div>
<div id="demo">
<a href="">第四条应该是红色</a>
<!--适用第5、6条CSS规则，第6条CSS优先级高-->
</div>
</body>注意：
- !important的优先级是最高的，但出现冲突时则需比较”四位数“;
- 优先级相同时，则采用就近原则，选择最后出现的样式;
- 继承得来的属性，其优先级最低;
建议：css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。
腾讯云开发者
