!important不能滥用，应优先提升样式特异性：使用命名空间类名、利用组件属性精准定位、通过props注入样式；:where()/:is()可降权覆盖，但需注意兼容性。
第三方组件样式不听你的话，!important真能随便加？
不能。加太多 !important 会让后续维护变成猜谜游戏——你永远不知道哪条规则在暗处生效，尤其当第三方组件自己也用 !important 时，冲突直接升级为“谁写得更晚谁赢”。它只是临时止血，不是解药。
真正可控的做法是提升你样式的**特异性（specificity）**，而不是靠暴力覆盖：
- 避免全局选择器如
button或.btn，改用带命名空间的类名，比如.my-app .third-party-modal .close-btn - 利用组件自身提供的 class 层级结构，比如 React 组件渲染后常带
data-reactroot或类似属性，可用[data-reactroot] .ant-btn-primary精准定位 - 如果组件支持
className或styleprop（如 Ant Design 的className、MUI 的sx），优先通过 props 注入样式，比外部 CSS 更可靠
用 :where() 或 :is() 降权又保覆盖，靠谱吗？
靠谱，但要看场景。这两个伪类会把选择器权重重置为 0，适合你想「安全覆盖」又不想压过其他规则时用。
比如你想改所有 .ant-tag 的背景色，但又怕影响到其他地方的同名类：
立即学习“前端免费学习笔记（深入）”；
:where(.my-app) .ant-tag {
background-color: #1890ff !important;
}
这里 :where() 让整条规则权重等同于 .ant-tag，不会意外干掉你自己写的高权重要求。但注意：:where() 和 :is() 在旧版 Safari（
Shadow DOM 里的第三方组件，CSS 根本进不去怎么办？
进不去就是进不去——这是设计使然。像 <video></video> 控件、某些 Web Component（如 <vaadin-button></vaadin-button>）、或启用了 shadowRoot 的自定义元素，外部 CSS 默认无效。
- 先确认是否真进了 Shadow DOM：右键检查元素 → 看节点下是否有
#shadow-root (open) - 若组件提供
theme属性或part属性（如part="input"），就用::part(input)选中并样式化 - 若完全封闭（
closed），且无主题 API，唯一办法是改用其官方推荐的主题方案（如 MUI 的createTheme、Chakra 的extendTheme），或 fork 组件源码
内联样式（style 属性）和 CSS-in-JS 谁优先级更高？
内联样式原生权重最高（1000），比任何外部 CSS 都高，包括带 !important 的规则。但 CSS-in-JS（如 Emotion、Styled Components）本质还是生成 class，权重取决于生成的选择器，一般不如内联样式硬。
所以如果你看到颜色没变，先检查是不是组件内部写了 style={{ color: 'red' }} ——这种 JS 直接注入的样式，CSS 再怎么写都盖不住：
- 查 DevTools 的 Styles 面板，看哪条规则被划掉，以及旁边是否标着
element.style - 遇到这种情况，要么提 PR 给组件加 className 支持，要么用
ref+useEffect手动改 DOM 的style（不推荐，易破），或者换用支持主题定制的同类组件
真正难的不是“怎么覆盖”，而是判断该不该覆盖——很多颜色问题其实该交给组件的主题系统去统一管理，强行用 CSS 插手，往往意味着你在绕开设计约束做修补。
