CSS层叠优先级由DOM中link和style标签的物理顺序决定，后加载的样式覆盖先加载的同名规则，而非选择器权重或!important数量。
link 标签的 rel="stylesheet" 顺序决定优先级
浏览器按 <link> 在 HTML 中出现的顺序逐个加载 CSS，后加载的样式会覆盖前面同名规则。这不是“谁更高级”，而是“谁最后写入”。很多人误以为 @import 或内联 <style> 天然更高，其实只要它出现在 <link> 后面，照样能覆盖。
- 多个
<link rel="stylesheet">：从上到下依次解析，后面覆盖前面 -
@import写在 CSS 文件里：它属于该文件的“内容”，加载时机晚、解析顺序靠后，但受宿主文件引入顺序约束 -
<style>块：如果放在所有<link>之后，就拥有最高层叠权；放中间？那它只管自己前后夹着的部分 - 避免用
@import在 HTML 中引入 CSS（如<style>@import "a.css";</style>）：它会阻塞后续资源下载，且优先级逻辑混乱
@import 的位置和嵌套会让优先级变不可控
@import 不是声明，是加载指令，而且必须写在 CSS 文件最前面（否则被忽略）。一旦嵌套多层（A.css @import B.css，B.css 又 @import C.css），加载顺序变成串行，B 和 C 的规则实际生效时间远晚于页面中其他 <link>，导致调试时“明明写了却没生效”的错觉。
- 浏览器不把
@import当作独立资源处理，不会并行下载，性能差 - 嵌套层级超过 1 层后，开发者很难准确预判最终层叠顺序
- 某些旧版 Safari 对多层
@import解析有 bug，部分规则直接丢弃 - 替代方案：用构建工具合并 CSS，或统一用
<link>并控制 HTML 中的顺序
!important 不是优先级开关，而是声明级别的强制标记
!important 不改变选择器权重计算，也不影响层叠顺序，它只是让某条声明“拒绝被同源的其他声明覆盖”。但它不能跨来源压制：一个 <link> 里的 !important 仍会被后面 <link> 或 <style> 里的另一个 !important 覆盖。
- 同一来源（比如同一个
<style>块）中，!important声明优先于非!important声明 - 不同来源之间，仍遵守“后加载者胜出”原则，
!important只在本层生效 - 过度使用
!important会让调试变成猜谜——你得翻遍所有 CSS 文件找“谁最后写了这个带 !important 的属性” - 真正需要覆盖第三方库样式时，优先用更高 specificity 的选择器，而不是堆
!important
动态插入的 style 标签默认拥有最高层叠权
JS 用 document.createElement("style") 插入的样式，默认追加在 <head> 末尾，因此它比所有静态 <link> 和页面已存在的 <style> 更靠后。这是实现主题切换、暗色模式等运行时样式的底层依据。
立即学习“前端免费学习笔记（深入）”；
- 插入位置很重要：用
head.appendChild()是末尾，用head.insertBefore()可以插到指定节点前 - 动态插入的
<style>里写@import依然慢且不可靠，别这么干 - 如果插入后又删掉，对应样式立即失效——没有“卸载”概念，只有 DOM 移除
- 服务端渲染（SSR）场景下，注意避免水合（hydration）时 JS 插入样式与服务端输出冲突，造成闪屏
<link> 和 <style> 的物理顺序，比背权重表管用得多。 
