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 是临时补丁，长期维护成本高。更可靠的方式是：
立即学习“前端免费学习笔记（深入）”；
- 用 BEM 或 CSS Modules 生成唯一类名，例如
.Button--primary或MyComponent_button__k2f9x - 在现代框架中启用 scoped 样式（Vue 的
<style scoped></style>、Svelte 的<style></style>默认局部作用域） - 通过构建工具（如 PostCSS +
postcss-prefix-selector）为整块 CSS 自动添加前缀，隔离影响范围 - 把第三方库样式单独引入，并放在自己样式表之前，避免被意外覆盖
比如 Webpack 项目中，确保 import 'antd/dist/reset.css'; 出现在你自己的 index.css 之前，而不是反过来。
调试冲突时，看 DevTools 的“Computed”面板比猜顺序更准
遇到样式没生效，别急着改引入顺序或加 !important。打开浏览器开发者工具，切到 Computed 面板，找到目标属性（如 color），点开右侧小箭头，就能看到所有参与计算的规则、它们的来源文件、行号、是否被划掉（即被更高优先级覆盖）。被划掉的那条，才是真正在起作用的“赢家”。
这时候再决定：是提升选择器权重（比如从 .item 改成 .list .item），还是重构命名，或者确认是否该用 CSS-in-JS 动态控制——而不是无脑加 !important。
