normalize.css 必须在所有第三方样式之前加载，否则会被覆盖导致基础样式失效；其克制特性依赖正确顺序，且需防范内联样式、id选择器和css-in-js等隐性覆盖。
重置样式冲突不是“谁写得晚谁赢”，而是 normalize.css 或 reset.css 被后加载的第三方库（如 bootstrap、element-plus）覆盖了——它必须在所有框架样式之前生效，否则基础排版、表单、标题等就全乱了。
为什么 normalize.css 放后面就失效了
浏览器按 <link> 从上到下解析 CSS，normalize.css 的作用是统一各浏览器默认行为（比如 button 的光标、h1 的粗细、input:focus 的 outline），但它本身不带高权重选择器。一旦 element-plus/dist/index.css 在它之后加载，且里面写了 button { margin: 0; padding: 8px; }，这些声明就会直接覆盖 normalize.css 中更温和的基础定义。
- 打开 DevTools → Elements → 选中一个
button→ 看 Computed 面板里的margin、padding来源：如果显示来自element-plus文件，而normalize.css里的同名规则被划掉，就是顺序错了 -
normalize.css不是“增强版 reset”，它不设margin: 0这种暴力清零，所以对后续框架的侵入性小；但正因为“克制”，才更依赖加载时机 - Vite/Webpack 中用
import加载时，也要确保import 'normalize.css';出现在所有 UI 库import之前，否则构建后仍可能错位
如何安全地把重置样式“钉”在最前面
顺序只是前提，真正要防的是第三方库自己悄悄带重置逻辑（比如 Bootstrap 自带 _reboot.scss），或通过 @import 把重置混进主文件里。
- HTML 中严格按此顺序：
<link rel="stylesheet" href="/node_modules/normalize.css/normalize.css">→ 其他所有第三方 CSS → 你的main.css - 避免在第三方库的 CSS 文件里看到
@import './reboot.css';这类语句——如果有，说明它自带重置，你再加normalize.css就冗余甚至打架，此时应关闭该库的内置重置（如 Bootstrap 5 的$enable-reboot: false） - 若用 Tailwind，它默认已集成
preflight（类似 normalize），此时再引入normalize.css属于重复，反而增加冲突面
重置之后还是被改？检查这三个隐性覆盖点
即使 normalize.css 加载最早，某些第三方库仍会绕过它生效——不是顺序问题，而是它们用了更高权重或更早介入的机制。
- 内联样式：比如组件库渲染时直接给
<input style="margin: 0">，这种style属性权重为 1000，normalize.css里的input { margin: 0.5em; }（权重 1）根本压不住，得用 JS 清除或换类名控制 - ID 选择器：个别老库（如早期 jQuery UI）用
#dialog .button这类规则，权重 100+10=110，远超normalize.css的元素级声明，需用body #dialog .button或:where()降权处理 - CSS-in-JS 注入：像 Ant Design 的
StyleProvider或 emotion 的CacheProvider会在 DOM head 末尾动态插入样式，物理位置靠后，且常带!important，此时仅调<link>顺序无效，得配prepend: true或改用StyleSheetManager
真正麻烦的不是找不到 normalize.css 该放哪，而是有些库根本不让你“重置”——它把基础样式和组件样式耦合在一起，删了重置，按钮就崩；留着重置，间距又错。这时候得看文档里有没有 base 开关，或者干脆放弃全局重置，改用 scoped 或 CSS Modules 控制边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
