应让 normalize.css 或 reset.css 优先加载，即作为第一个生效的样式表；二者不可共存，normalize.css 温和修复浏览器差异，reset.css 暴力清零，错误顺序或额外重置会导致覆盖失效。
reset.css 和 normalize.css 哪个该先加载？
必须让 reset.css 或 normalize.css 成为整个 CSS 加载链中「第一个生效的样式表」，否则后续自定义样式会覆盖它们的重置逻辑，导致你看到的“样式被重置”其实是“没被重置成功”。
-
reset.css是暴力清零：把所有元素的margin、padding、font-size等设为0或统一值，依赖它之后手动补全样式 -
normalize.css是温和修复：保留有用的默认行为（比如h1有字体加粗、audio有默认控件），只修正浏览器间不一致的地方 - 二者**不能同时用**——它们目标相反，叠加会导致样式冲突或不可预测的覆盖
- 如果用了
normalize.css，就别再引入reset.css；反之亦然
HTML 中 link 标签顺序写错的典型表现
常见错误是把业务 CSS 放在重置 CSS 前面，例如：
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="normalize.css">
这样 style.css 里的 body { margin: 0; } 会被 normalize.css 里更宽泛的 body { margin: 8px; } 覆盖，结果页面反而出现意外外边距。
- 正确顺序一定是：
normalize.css或reset.css在最前 - 确保没有其他内联
<style></style>或@import在它之前执行 - Vite / Webpack 等构建工具中，如果通过
@import引入重置文件，要确认它在main.css的第一行，且没有被 CSS-in-JS 库（如 styled-components）动态插入的样式抢先
Chrome DevTools 里怎么快速定位重置失效？
打开 Elements 面板，选中一个异常元素（比如 h1 字体太小），看右侧 Styles 标签页：
立即学习“前端免费学习笔记（深入）”；
- 如果
normalize.css的规则显示为被划掉（strikethrough），说明有更高优先级的样式覆盖了它 - 检查是否出现类似
h1 { font-size: 1em; }这种来自你自己的 CSS，且它的选择器权重比normalize.css中的h1 { font-size: 2em; }更高 - 注意：某些 UI 框架（如 Bootstrap、Ant Design）自带重置逻辑，若你又额外引入
normalize.css，它们之间会打架——此时应禁用框架内置重置（如 Bootstrap 5 的$enable-reboot: false）
用 @import 替代 link 时的隐藏陷阱
@import 不仅性能差（阻塞并行加载），还会改变层叠顺序：它总是按代码书写顺序生效，但权重低于同级 link。所以即使写成：
@import 'normalize.css'; @import 'base.css';
如果 HTML 中还有 <link href="theme.css">，那 theme.css 仍会覆盖前面两个 @import 的规则。
- 结论：永远优先用
<link>，且放在最顶部 - 如果非要用
@import（比如 Sass 中），确保整个项目只有一处入口 CSS，并在里面最先@import重置文件 - Webpack 的
css-loader默认不解析@import外部 URL，容易静默失败——检查控制台是否有Failed to load resource提示
