link标签顺序决定css优先级，后加载的同权重规则覆盖前者；@import会破坏顺序且插入时机晚于link；preload仅加速下载不改变应用顺序；动态插入需用insertbefore确保位置；多机制叠加时应以devtools computed面板为准。
link 标签顺序直接决定 CSS 优先级
浏览器按 <link> 在 HTML 中出现的顺序依次加载并应用样式，后加载的 CSS 规则会覆盖前面同权重的选择器。这不是“建议”，而是渲染引擎的确定性行为——哪怕第二个 <link> 文件体积小、加载快，只要它在 DOM 中排在后面，它的规则就拥有更高应用优先级。
多个 link 加载时，@import 会破坏预期顺序
@import 在 CSS 文件内部使用时，会阻塞后续样式的解析，且其引入的规则实际插入时机晚于外链 <link>。这意味着：
如果 main.css 里写了 @import 'theme.css';，而 HTML 中又有 <link href="base.css"> 和 <link href="main.css">，那么最终生效顺序是：base.css → main.css 内部规则 → theme.css（即使 theme.css 文件本身早被请求）。
- 避免在已通过
<link>引入的 CSS 中再用@import，尤其不要用于覆盖逻辑 - 想复用样式？改用构建工具合并，或用
<link rel="stylesheet">显式声明依赖顺序 - Chrome DevTools 的 Network 面板能看到
@import请求明显滞后，这是调试顺序错乱的第一线索
rel="preload" 不改变 CSS 应用顺序
给 <link rel="preload"> 加 as="style" 只加速下载，不提前应用。它和普通 <link rel="stylesheet"> 共存时，后者仍按位置决定注入时机。
- 错误写法：
<link rel="preload" href="critical.css" as="style"> <link rel="stylesheet" href="app.css">——critical.css不会自动生效 - 正确做法：preload 后需手动
<link rel="stylesheet" href="critical.css">，且该标签必须放在其他样式<link>之前才能优先应用 - 注意 Safari 对
rel="preload"+as="style"支持较晚（iOS 15.4+），旧版本会忽略 preload
动态插入 link 时，insertBefore 比 appendChild 更可控
JS 动态加样式表时，用 document.head.insertBefore(newLink, document.head.firstChild) 能确保新样式总在最前；而 appendChild 总是追加到末尾，容易意外覆盖已有规则。
- 常见翻车点：组件库动态加载主题 CSS，却用
appendChild，导致主题色被主框架样式盖掉 - 如果必须插到某特定
<link>后面，用el.parentNode.insertBefore(newLink, el.nextSibling)，别依赖索引 - 动态插入的
<link>默认异步加载，如需同步阻塞渲染（比如 critical CSS），得加media="print"并 onload 后切回media="all"
真正难的不是记住“谁在后面谁生效”，而是当项目里混着 HTML 内联 style、<link>、@import、JS 动态插入、CSS-in-JS 注入、Shadow DOM 样式隔离……这些机制叠加时，顺序会变成隐式依赖。这时候靠猜不如打开 DevTools 的 Computed 面板，点开任一属性，看右侧 “Styles” 列表里哪条被划掉了——那才是真实生效链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
