CSS 优先级算法

CSS的优先级是根据样式声明的特殊性值来判断的。

选择器的特殊性值分为四个等级，如下：

（1）标签内选择符x,0,0,0

（2）ID选择符0,x,0,0

（3）class选择符/属性选择符/伪类选择符  0,0,x,0

（4）元素和伪元素选择符0,0,0,x

计算方法：

（1）每个等级的初始值为0

（2）每个等级的叠加为选择器出现的次数相加

（3）不可进位，比如0,99,99,99

（4）依次表示为：0,0,0,0

（5）每个等级计数之间没关联

（6）等级判断从左向右，如果某一位数值相同，则判断下一位数值

（7）如果两个优先级相同，则最后出现的优先级高，!important也适用

（8）通配符选择器的特殊性值为：0,0,0,0

（9）继承样式优先级最低，通配符样式优先级高于继承样式

（10）!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

计算实例：

（1）#demo a{color: orange;}/*特殊性值：0,1,0,1*/

（2）div#demo a{color: red;}/*特殊性值：0,1,0,2*/

注意：

（1）样式应用时，css会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性。

（2）特殊性值越大的声明优先级越高。

（3）相同特殊性值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的）

 (4) 部分浏览器由于字节溢出问题出现的进位表现不做考虑

判断优先级时，首先我们会判断一条属性声明是否有权重，也就是是否在声明后面加上了!important。一条声明如果加上了权重，

那么它的优先级就是最高的，前提是它之后不再出现相同权重的声明。如果权重相同，我们则需要去比较匹配规则的特殊性。

一条匹配规则一般由多个选择器组成，一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级，

第一个等级是行内样式，为1000，第二个等级是id选择器，为0100，第三个等级是类选择器、伪类选择器和属性选择器，为0010，

第四个等级是元素选择器和伪元素选择器，为0001。规则中每出现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等

级的叠加，不会产生进位。选择器特殊性值的比较是从左向右排序的，也就是说以1开头的特殊性值比所有以0开头的特殊性值要大。

比如说特殊性值为1000的的规则优先级就要比特殊性值为0999的规则高。如果两个规则的特殊性值相等的时候，那么就会根据它们引

入的顺序，后出现的规则的优先级最高。