reset.css能覆盖ant-btn等样式，因其全局无条件匹配原生标签（如button、input），而ant design等组件基于原生标签渲染却未补全所有被重置的基础属性；normalize.css虽更克制，但仍统一原生标签默认值，导致与组件内部样式冲突。
reset.css 为什么能覆盖 ant-btn 或 el-input 的样式
因为 reset.css 里的规则（比如 button { margin: 0; padding: 0; }、* { box-sizing: border-box; }）是无条件全局生效的，浏览器不区分这个 button 是不是你写的，只要 DOM 里有原生 <button></button> 标签，它就匹配。而 Ant Design 的 <button class="ant-btn"></button> 和 Element Plus 的 <button class="el-button"></button> 都基于原生 button 渲染——它们依赖的默认 margin、padding、line-height、font-family 全被 reset 重写了，但自身样式又没显式补全所有基础属性，结果就是按钮变矮、文字贴边、焦点 outline 消失。
normalize.css 也出问题？它不是“温和重置”吗
是的，normalize.css 确实比 reset.css 更克制，但它仍会统一 h1–h6、input、textarea、table 等原生标签的默认表现。问题在于：第三方组件内部大量使用这些标签做结构支撑（比如 el-input 内部是 <input> + <span></span>），而它的样式只覆盖了 .el-input 类，没重写 input 的 font-size 或 vertical-align。一旦 normalize.css 把 input 的 font-size 设为 1rem，而你的设计系统用的是 0.875rem，输入框高度和对齐就全乱了。
为什么加个 .my-app 容器也拦不住 reset
reset.css 里几乎全是标签选择器（button）、通配符（*）、属性选择器（[type="text"]），没有父级限定。这意味着：.my-app button 权重是 (0,1,1,0)，而 button 是 (0,0,1,0)——权重低，但它是全局命中、无条件执行的。更关键的是，很多 UI 库（如 Ant Design Modal）会把浮层 DOM 直接挂到 document.body 下，完全脱离你的 .my-app 范围，此时连“用容器包住”的兜底方式都失效。
@layer reset 能解决吗？要注意什么
可以，但必须严格满足两个条件：@layer reset 声明得放在所有 CSS 文件最顶部；第三方 reset 必须被 @layer reset 显式包裹（比如 @layer reset { @import 'normalize.css'; }）。否则构建工具（Vite/Webpack）可能把 import 提前解析，导致 @layer 失效。另外，如果第三方库自己带内联样式或 JS 动态注入 style 标签（如 ECharts 的 tooltip），@layer 控制不了那些内容——它们不在 CSSOM 层级里。
真正容易被忽略的点是：reset 不是“越早加载越好”，而是“必须在所有框架 CSS 之前，且不能和业务样式混在一起”。哪怕只多写了一行 .btn { padding: 4px; } 在 reset 文件里，它就不再是 reset，而是污染源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
