CSS加载顺序影响样式表现，关键在理解link与style引入位置、权重规则及浏览器解析顺序：link后加载者覆盖同权重声明；style标签默认晚于link解析而具优势；应优先用specificity而非依赖顺序控制样式。
CSS 文件加载顺序直接影响样式的最终表现，错乱往往不是代码写错了，而是层叠（cascade）和加载时机没理清。关键在于理解 <link> 和 <style> 的引入位置、权重规则以及浏览器解析顺序。
link 标签的顺序决定层叠优先级
多个外部 CSS 文件通过 <link rel="stylesheet"> 引入时，后加载的样式会覆盖前面同选择器、同权重的声明。比如：
-
<link href="base.css">定义了body { color: #333; } -
<link href="theme.css">在它后面，也写了body { color: #1a73e8; } - 结果是蓝色生效 —— 因为 theme.css 后解析，层叠顺序更高
⚠️ 注意：如果把 theme.css 放在 base.css 前面，颜色就会回退成灰色，即使内容没变。
style 标签比 link 具有“天然后置”优势
内联 <style>（尤其放在 </head> 前或 <body> 底部）默认比所有 <link> 更晚解析，因此同权重下更容易生效。例如：
立即学习“前端免费学习笔记（深入）”；
<link href="reset.css"><link href="main.css">-
<style>h1 { font-size: 2rem; }</style>→ 这行会覆盖 main.css 里同选择器的 font-size
但别滥用 —— 过多内联样式难维护，也影响缓存复用。
避免靠顺序“硬压”，优先用 specificity 控制
依赖加载顺序容易翻车，尤其多人协作或动态插入样式时。更可靠的方式是提升选择器权重：
- 用
.header .title替代.title - 必要时加
!important（仅限覆盖第三方库或内联 style） - 组件化开发中，用 BEM 或 CSS-in-JS 隔离作用域
比如第三方 UI 库的按钮样式被你项目里的全局 button { padding: 8px; } 覆盖了？改成 .my-app button { padding: 12px; } 就更稳。
动态加载时注意 onload 和 DOM 就绪时机
用 JS 动态插入 <link>，它不会阻塞渲染，但可能晚于 <style> 执行。常见陷阱：
-
document.write('<link href="late.css">')→ 不推荐，破坏流式解析 - 正确做法：
const link = document.createElement('link'); link.href = 'late.css'; document.head.appendChild(link); - 若需确保 late.css 生效后再操作 DOM，监听
link.onload或用CSSStyleSheet.replace()（现代方案）
基本上就这些。理清加载顺序只是表象，真正要抓的是层叠逻辑 + 选择器设计 + 加载可控性。不复杂但容易忽略。
