CSS层叠优先级详解与设置技巧

CSS层叠优先级的本质并非复杂的选择器权重计算或!important数量比拼，而是一场“谁最后落笔”的物理顺序博弈——真正起决定作用的是link、style标签及动态插入样式在DOM中的实际加载与插入顺序：后出现的样式无条件覆盖先出现的同名规则；@import因串行加载、解析延迟和嵌套不可控而严重扰乱优先级并损害性能；!important仅在声明层面强制生效，无法跨越资源来源打破“后加载者胜出”铁律；动态插入的style标签凭借默认追加至head末尾的特性，天然拥有最高层叠权，成为主题切换等运行时样式的可靠基础。掌握这一核心逻辑，远比死记权重表更能精准掌控样式表现。

link 标签的 rel="stylesheet" 顺序决定优先级

浏览器按 在 HTML 中出现的顺序逐个加载 CSS，后加载的样式会覆盖前面同名规则。这不是“谁更高级”，而是“谁最后写入”。很多人误以为 @import 或内联 ）：它会阻塞后续资源下载，且优先级逻辑混乱

@import 的位置和嵌套会让优先级变不可控

@import 不是声明，是加载指令，而且必须写在 CSS 文件最前面（否则被忽略）。一旦嵌套多层（A.css @import B.css，B.css 又 @import C.css），加载顺序变成串行，B 和 C 的规则实际生效时间远晚于页面中其他 ，导致调试时“明明写了却没生效”的错觉。

• 浏览器不把 @import 当作独立资源处理，不会并行下载，性能差
• 嵌套层级超过 1 层后，开发者很难准确预判最终层叠顺序
• 某些旧版 Safari 对多层 @import 解析有 bug，部分规则直接丢弃
• 替代方案：用构建工具合并 CSS，或统一用 并控制 HTML 中的顺序

!important 不是优先级开关，而是声明级别的强制标记

!important 不改变选择器权重计算，也不影响层叠顺序，它只是让某条声明“拒绝被同源的其他声明覆盖”。但它不能跨来源压制：一个 里的 !important 仍会被后面 或