CSS样式覆盖顺序解析与实战技巧

本文深入剖析了CSS样式覆盖链中四大关键陷阱：浏览器默认样式如何悄无声息地干扰按钮等元素表现，@import因阻塞加载引发的变量与规则失效风险，!important被误用导致的层级混乱与维护灾难，以及CSS自定义属性在继承边界、响应式作用域和Shadow DOM中的真实行为限制；通过对比normalize.css与暴力重置、揭示内联样式的绝对优先级、强调:root中媒体查询定义变量的正确姿势，为开发者提供了一套兼顾兼容性、可维护性与现代特性的样式治理方法论。

浏览器默认样式怎么偷偷改掉你的按钮

浏览器自带的 user agent stylesheet 会默默给 button、input、h1 等元素加边距、字体、背景色，你写的 button { background: blue; } 看似生效，其实可能只是盖住了它的一部分——比如 border 还是浏览器默认的 2px outset，导致点击时有奇怪凸起。

常见错误现象：button 在 Chrome 和 Safari 中看起来不同；重置了 margin 但 padding 依然不一致；用 !important 强行覆盖后，后续组件复用时样式崩得更厉害。

• 别只靠 * { margin: 0; padding: 0; } —— 它不重置 border、font、line-height，更不管表单控件的伪元素（如 ::-webkit-inner-spin-button）
• 推荐从 normalize.css 或 modern-normalize 开始，它们是“修复型”而非“清零型”，保留有用的默认行为（比如列表缩进、pre 的空格处理）
• 若必须自定义重置，至少覆盖： box-sizing、margin、padding、border、font、line-height、vertical-align，且对 input[type="number"]、textarea 单独处理

CSS @import 的加载顺序陷阱

@import 不是声明式，是运行时阻塞加载——它会让当前 CSS 文件暂停解析，直到被导入的文件下载并解析完。你写 @import 'base.css'; 在 theme.css 里，结果 base.css 晚于 theme.css 加载，所有依赖它的变量和类名就全失效了。

使用场景：仅适合小范围、确定无网络延迟的构建环境（比如 PostCSS 插件已提前合并），绝不能用于生产 HTML 中的