多个CSS选择器命中同一元素时，按层叠（cascade）+优先级（specificity）+源顺序（source order）三步决定生效规则；specificity为四元组(a,b,c,d)，逐位比较不进位；!important仅限第三方库覆盖等特殊场景；@import需置于CSS文件首行，link按HTML顺序加载。
多个 CSS 选择器命中同一元素时，谁生效？
浏览器只渲染最终计算出的 computed style，不会“叠加”多个规则的值——而是按**层叠（cascade）+ 优先级（specificity）+ 源顺序（source order）** 三步决定。关键不是“谁写了”，而是“谁更具体、谁在后面、谁来源权重更高”。
specificity 具体怎么算？别靠感觉
specificity 是一个四元组 (a,b,c,d)，从左到右权重递减：
-
a：内联样式（style="..."）计为 1，否则为 0 -
b：ID 选择器个数（如#header） -
c：类名、属性选择器、伪类个数（如.btn、[type="text"]、:hover） -
d：元素名、伪元素个数（如div、::before）
比较时逐位比大小，不进位。例如：
.nav ul li a → (0,0,1,3) #main .nav a:hover → (0,1,2,1) style="color:red" → (1,0,0,0)
(0,1,2,1) > (0,0,1,3)，所以后者会被覆盖；但 (1,0,0,0) 压倒一切（除非加 !important）。
立即学习“前端免费学习笔记（深入）”；
!important 不是万能解药，反而容易埋雷
!important 会提升声明级权重，但它打乱了自然层叠逻辑，导致调试困难、维护成本陡增。它只在以下场景勉强可接受：
- 第三方 UI 库样式强行覆盖（如重置
antd某个组件的margin） - CSS-in-JS 动态注入样式需强制生效（如
emotion的css函数中） - 用户自定义样式插件（如浏览器扩展）必须劫持页面样式
日常开发中，优先用更精确的选择器替代 !important。比如把 .btn { color: red !important; } 改成 body .btn { color: red; }（增加一层元素选择器，提升 specificity）。
@import 和 link 加载顺序影响层叠结果
CSS 文件加载顺序直接影响 source order，而 source order 是 specificity 相同时的决胜条件。注意：
-
@import必须写在 CSS 文件最开头，且其引入的样式被视为“写在该行位置” -
<link rel="stylesheet">按 HTML 中出现顺序解析，后加载的样式优先级更高 - 同个文件内，后写的规则覆盖先写的（相同 specificity 下）
常见陷阱：@import "reset.css"; 写在 main.css 中间，会导致 reset 规则被误判为“出现在 main 后半部分”，实际应放在第一行。
复杂点在于，现代项目常混用 CSS Modules、CSS-in-JS、Tailwind 的 utility-first 类，它们生成的选择器 specificity 极低（基本都是 (0,0,1,0)），此时 source order 和命名冲突就变得格外敏感——稍不注意，一个全局 .text-red-500 就可能被某个组件里写的 .card .title 覆盖掉。
