CSS权重决定样式优先级，以四元组(a,b,c,d)表示，a为内联样式，b为ID数，c为类/属性/伪类数，d为标签/伪元素数，从左到右逐位比较，如(0,1,0,0)>(0,0,10,0)，!important最高但慎用，继承样式权重为0，后定义覆盖前定义。
CSS 权重（Specificity）是用来决定当多个样式规则应用于同一个元素时，哪一个规则真正生效。权重由选择器的类型和数量决定，浏览器根据权重高低来选择应用哪个样式。
权重的基本组成
CSS 权重通常用一个四元组表示：(a, b, c, d)，从左到右优先级依次降低：
- a：内联样式的权重（如 style="..."），值为 1 时该项为 1，否则为 0
- b：ID 选择器的数量
-
c：类选择器、属性选择器、伪类的
数量 - d：标签选择器、伪元素的数量
数量例如：
- #header .nav li:hover → (0, 1, 2, 1)
- div#main p.highlight → (0, 1, 1, 2)
- style="color: red" → (1, 0, 0, 0)
常见选择器的权重值
- 内联样式：1000 → (1,0,0,0)
- ID 选择器（如 #id）：100 → (0,1,0,0)
- 类选择器、属性选择器、伪类（如 .class、[type="text"]、:hover）：10 → (0,0,1,0)
- 标签选择器、伪元素（如 div、::before）：1 → (0,0,0,1)
- 通配符选择器（*）、组合符（+、>、~）、否定伪类（:not() 内部的选择器才计权）：0
:not() 比较特殊 —— 它本身不增加权重，但括号内的选择器会正常计算。比如 :
- .box:not(#special) → 权重是 (0,1,1,0)，因为 #special 是 ID，算 100，.box 算 10
权重比较方式
权重比较是从左到右逐位比较，类似数字大小判断：
- (0,1,0,0) > (0,0,10,0) —— 即一个 ID 胜过十个类
- (0,0,2,0) > (0,0,1,10) —— 类多的胜出
相同权重下，后出现的样式覆盖前面的（遵循层叠顺序）。
特殊情况与注意事项
- !important：会覆盖所有普通声明，不管权重多高。但应谨慎使用，破坏样式可维护性
- 继承的样式没有权重：继承来的样式优先级最低，相当于 (0,0,0,0)
- !important 的权重：单独处理，高于任何普通规则，多个 !important 则再比 specificity
- 浏览器默认样式：也有权重，可能被自定义样式覆盖，取决于具体选择器
基本上就这些。写选择器时，尽量避免靠提升权重解决问题，保持结构清晰更重要。权重算得准，冲突自然少。
