CSS 特异性
CSS 特异性（Specificity）是决定当多个 CSS 规则应用于同一个元素时，浏览器如何选择最终生效样式的规则。它通过计算选择器的优先级来确定哪条规则具有更高的权重。
特异性计算规则
特异性通过四元组 (a, b, c, d) 表示，优先级从高到低依次比较每个位置的值：
a：内联样式（如 style="color: red;"），存在则为 1，否则为 0。
b：ID 选择器的数量（如 #header）。
c：类选择器（.btn）、属性选择器（[type="text"]）、伪类（:hover）的数量。
d：元素选择器（div）、伪元素（::before）的数量。
注意：通用选择器（*）、组合符（+, >, ~）和否定伪类（:not()）不增加特异性，但 :not() 内部的选择器会参与计算。
特异性比较示例
| 选择器示例 | 特异性值 (a, b, c, d) | 解释 |
|---|---|---|
style="..." | (1, 0, 0, 0) | 内联样式最高 |
#nav .item:hover | (0, 1, 2, 0) | 1个ID + 2个类/伪类 |
ul#list li.active | (0, 1, 1, 2) | 1个ID + 1个类 + 2个元素 |
.btn[data-type="primary"] | (0, 0, 2, 0) | 2个类/属性 |
div > p::first-line | (0, 0, 0, 3) | 3个元素/伪元素 |
比较规则：按 a → b → c → d 顺序逐级比较，数值大者胜出。
例如：
(0,1,0,0) > (0,0,3,3)（ID 权重高于多个类/元素）
(0,0,2,1) > (0,0,1,5)（类数量多者胜出）
特殊规则与注意事项
!important 的霸权
在样式声明后添加 !important（如 color: red !important;）会直接覆盖其他规则，包括内联样式。
慎用：滥用会导致样式难以维护，建议仅在必要时使用。
继承样式的特异性最低
继承自父元素的样式（如 font-family）的特异性为 (0,0,0,0)，低于任何显式选择器。
相同特异性时，后定义的规则生效
.text { color: blue; }
.text { color: red; } /* 最终生效 */