css样式冲突本质是层叠顺序问题，按!important > 内联样式 > id > 类/属性/伪类 > 元素/伪元素 > 继承 > 默认样式的优先级计算，同优先级时引入顺序才起作用。
CSS 样式冲突的本质是层叠顺序问题
样式冲突不是“谁写得晚谁赢”，而是浏览器按 !important > 内联样式 > ID 选择器 > 类/属性/伪类 > 元素/伪元素 > 继承 > 浏览器默认 的优先级逐层计算后，取最终胜出的声明。引入顺序只在**优先级相等时**起作用——比如两个相同的类名 .btn，后引入的 CSS 文件里的定义会覆盖前面的。
用 !important 要极其谨慎，别当“万能解药”
!important 会破坏层叠逻辑，让调试变得困难，尤其在多人协作或使用第三方 UI 库（如 Ant Design、Element Plus）时，容易引发不可预期的覆盖。它适合极少数场景：
- 用户自定义主题覆盖（如暗色模式切换器注入的强制样式）
- 第三方组件内部无法修改但必须覆盖的紧急修复（例如
iframe外部强行重置滚动条样式） - 全局重置中防止被意外继承（如
*, *::before, *::after { box-sizing: border-box !important; }）
避免这样写：.header { color: red !important; } —— 它会让后续所有针对 .header 的颜色调整都失效，除非也加 !important，形成恶性循环。
真正可控的防冲突策略：命名 + 作用域 + 工具链
靠手调引入顺序和滥用 !important 是临时补丁，长期维护成本高。更可靠的方式是：
