CSS3选择器优先级及计算
CSS3选择器的优先级计算基于选择器类型的权重，采用四元组（a, b, c, d）进行比较，规则如下：
优先级四元组
- a（内联样式）：若存在行内样式（如
style="..."），则a=1，否则a=0。 - b（ID选择器数量）：统计选择器中ID选择器的数量（如
#header）。 - c（类、属性、伪类数量）：统计类选择器（如
.class）、属性选择器（如[type="text"]）和伪类（如:hover）的数量。 - d（元素、伪元素数量）：统计元素选择器（如
div）和伪元素（如::before）的数量。
比较规则
- 按四元组顺序从左到右逐级比较，数值大的优先级更高。
- 不进位：高位数值直接决定优先级，无需考虑低位。例如：
(0,1,0,0)>(0,0,20,0)（ID优先级高于类）。(0,0,2,0)>(0,0,1,5)（类数量多的优先级更高）。
示例
-
选择器
ul#nav li.active a：- ID选择器
#nav→ b=1。 - 类选择器
.active→ c=1。 - 元素选择器
ul、li、a→ d=3。 - 优先级：
(0,1,1,3)。
- ID选择器
-
选择器
#header .menu li:hover：- ID选择器
#header→ b=1。 - 类选择器
.menu和伪类:hover→ c=2。 - 元素选择器
li→ d=1。 - 优先级：
(0,1,2,1)。
- ID选择器
特殊规则
!important：标记为!important的样式优先级最高（覆盖其他声明），但多个!important冲突时，仍按四元组比较。- 否定伪类
:not()：内部的选择器会计入优先级。例如，div:not(.class)的优先级为(0,0,1,1)（类+元素）。 - 通配符与组合符：通配符（
*）和组合符（>、+等）不影响优先级。
优先级相同时
- 后定义的样式生效：若优先级相同，样式表中后出现的规则覆盖前者。
总结
- 内联样式 > ID > 类/属性/伪类 > 元素/伪元素。
- 比较时按四元组逐级判断，不进位。
- 避免滥用
!important，保持代码可维护性。
示例对比：
/* 优先级: (0,1,1,3) */
ul#nav li.active a { ... }
/* 优先级: (0,1,2,1) */
#header .menu li:hover { ... }
第二个选择器因c位更高而胜出。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
