Css - 优先级

优先级不是特殊性值的简单相加。根据特殊性值可以大概分为4类。

summary：!important > 内联样式 > id选择器 > （class选择器 = 属性选择器 = 伪类选择器）> （标签选择器 = 伪元素选择器） > （通配选择符、关系选择符、否定伪类、继承属性、浏览器默认属性）

特殊情况

特殊情况	优先级	特殊性值
!important	最高	没有特殊性值，但可以认为是1,0,0,0,0
内联样式（style="color:red"）	仅次于!important	1,0,0,0

第一级

选择器	特殊性值
id选择器（#btn）	0,1,0,0

第二级

选择器	特殊性值
class选择器（.btn）	0,0,1,0
属性选择器（[type="radio"]）	0,0,1,0
伪类（:hover）	0,0,1,0

第三级

选择器	特殊性值
伪元素（::before）	0,0,0,1
类型选择器（标签选择器h1）	0,0,0,1

第四级（不影响优先级）

选择器	特殊性值
通配选择符 *	0,0,0,0
关系选择符（+、>、~、||、''）	0,0,0,0
否定伪类（:not()）	0,0,0,0

规则：

• !important 覆盖所有选择器
• 内联样式仅次于!important
• 计算特殊性值无法进位（10*(0,0,0,1)不大于(0,0,1,0)）
• 相同特殊性值时最后声明者生效