!important 不是解决方案，因其破坏层叠规则、加剧调试难度并易被高权重框架样式覆盖；应通过 CSS Scope 隔离、谨慎使用 all: unset、控制加载顺序及关注伪元素/自定义属性依赖来解决样式冲突。
为什么 !important 不是解决方案
很多人一遇到样式覆盖就加 !important，结果越加越多，最后连自己都搞不清哪条生效。它破坏层叠优先级规则，让调试变成猜谜，还可能被后续引入的框架用更高权重覆盖（比如 Tailwind 的 @layer 或 Bootstrap 的深度嵌套选择器）。真正要做的不是“压过对方”，而是“隔开彼此”。
用 CSS Scope 隔离第三方框架样式
现代方案首选 :where() 或 :is() 配合命名空间前缀，但更稳妥的是直接作用域化。比如你用 Bootstrap + Ant Design，又不想改它们源码：
- 给整个 Bootstrap 使用区域加一个自定义属性：
<div data-framework="bootstrap">...</div>
- 重写其 CSS 入口，把所有规则加上前缀：
data-framework="bootstrap" .btn { ... } - 用 PostCSS 插件
postcss-prefixwrap自动完成这类包裹，避免手写漏项 - 注意：不要用
id做 scope，因为 ID 选择器权重太高，反而容易和框架内部!important冲突
重置或禁用框架默认样式时小心 all: unset
有人想“清干净再重来”，对第三方组件外层套一层 all: unset，结果发现表单控件失焦、滚动条消失、甚至 button 点击无反馈——因为 all: unset 会抹掉所有 UA 样式，包括可访问性相关行为。
- 只重置视觉部分更安全：
all: initial;
或逐项重置：margin: 0; padding: 0; border: none; background: transparent;
- 对
input、textarea、select这类元素，保留appearance: none以外的原生行为，否则屏幕阅读器可能无法识别 - 若用 Shadow DOM 封装（如 Web Components），
all: unset是安全的，但需确认框架支持 Shadow Root 渲染
动态加载框架 CSS 时检查 document.styleSheets 顺序
CSS 层叠依赖加载顺序，但异步加载（比如按需 import 的 UI 库）可能导致 Bootstrap 的 .container 被后加载的 Chakra UI 的 .container 覆盖，即使前者权重更高。
立即学习“前端免费学习笔记（深入）”；
- 用
document.styleSheets检查实际插入顺序：Array.from(document.styleSheets).map(s => s.href || 'inline')
- 强制控制顺序：用
insertAdjacentElement('beforebegin', link)把关键框架 CSS 插入到<head>最前面 - Webpack/Vite 用户注意：CSS 提取插件（如
mini-css-extract-plugin）默认按 entry 顺序输出，但若多个 entry 引用了同一框架，可能产生重复或错序，建议统一抽成vendor.css
::before/::after）、伪类（:focus-visible）和自定义属性（--bs-primary）的依赖——这些不会在 HTML 结构里显形，但一旦被覆盖或重置，交互细节就悄悄崩了。 
