link标签顺序影响样式是因为浏览器按HTML中从上到下顺序加载CSS，后加载的同权重规则会覆盖先加载的；推荐顺序为reset→base→components→page/theme。
为什么 link 标签顺序会影响最终样式
浏览器按 HTML 中 link 标签出现的**从上到下顺序**加载并解析 CSS，后加载的样式规则会覆盖先加载的同名规则（前提是选择器权重相同）。这不是“失效”，而是被覆盖了——你写的样式还在，只是没生效。
常见错误现象：reset.css 放在业务样式后面，结果按钮边框又出来了；theme.css 被 base.css 覆盖，主题色全变回默认灰。
- 权重相同时，后加载的 CSS 规则胜出
- 即使
!important也逃不过加载顺序带来的“谁最后写谁赢”逻辑（它只管单条规则内优先级） - 动态插入的
link（如 JS 创建）默认追加到head末尾，天然晚于静态link
标准 CSS 加载顺序推荐（4 层结构）
按「重置 → 基础 → 组件 → 页面/主题」逐层叠加，确保上层能安全覆盖下层：
<head> <!-- 1. 重置/标准化 --> <link rel="stylesheet" href="reset.css"> <p><!-- 2. 全局基础样式（字体、颜色变量、工具类）--> <link rel="stylesheet" href="base.css"></p><p><!-- 3. 可复用组件样式（Button、Card、Modal）--> <link rel="stylesheet" href="components.css"></p><p><!-- 4. 当前页面或主题专属样式（含 media query）--> <link rel="stylesheet" href="page-home.css"> </head>
这个顺序不是教条，但违反它大概率要手动加 !important 或提高选择器权重来补救，得不偿失。
立即学习“前端免费学习笔记（深入）”；
遇到样式被意外覆盖时怎么快速定位
打开 DevTools 的 Elements 面板，选中目标元素，在 Styles 侧边栏里看哪些规则被划掉（strikethrough）。重点观察：
- 被划掉的规则来自哪个文件？它的
link在 HTML 中排第几？ - 生效的规则是否来自更靠后的 CSS 文件？
- 检查是否有
@import：它会阻塞渲染且权重计算复杂，尽量不用 - 留意 CSS-in-JS 或 Shadow DOM 场景：它们有独立作用域，外部顺序不生效
动态加载 CSS 时的顺序陷阱
用 JS 动态插入 link 时，默认插入到 head 最后，容易压过本该优先的样式。例如：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'dark-mode.css';
document.head.appendChild(link); // ❌ 总是最后加载正确做法是插到指定 link 之前：
const baseLink = document.querySelector('link[href="base.css"]');
document.head.insertBefore(link, baseLink.nextSibling); // ✅ 插入到 base.css 之后或者统一用 document.styleSheets 检查已加载列表，避免依赖 DOM 插入位置。
最麻烦的是多个异步加载源（比如微前端各自注入 CSS），这时顺序完全不可控，必须靠 CSS Modules、CSS-in-JS 或命名空间隔离，光调顺序解决不了。
