内联样式优先级（1000）高于所有CSS规则，!important无法越级覆盖；继承的颜色不带!important，子元素任意color声明均可覆盖；多!important规则按特异性及顺序决胜。
为什么 !important 有时压不住内联样式里的颜色？
因为内联样式的优先级天生高于带 !important 的 CSS 规则，哪怕后者写在 <style></style> 或外部文件里。浏览器按“来源 + 特异性 + 顺序”算权重，而内联样式（style="color: red;"）的特异性直接拉到 1000 级，!important 只能翻倍它自己的那一层，不能越级覆盖。
常见错误现象：div { color: blue !important; } 写得再狠，也改不掉 <div style="color: green;"> 里的绿色。
<ul>
<li>真要覆盖内联色，得用 JavaScript 直接改 <code>element.style.color，或移除 style 属性
[style*="color"] 属性选择器 + !important 强制，但兼容性差、维护难
!important 在 CSS 颜色继承链里怎么失效的？
颜色本身可继承，但 !important 不继承。父元素设了 color: red !important;，子元素没显式声明 color，它会继承红色——但这红色“不带 !important 标签”，一旦子元素自己写了 color: blue;，哪怕没加 !important，也会立刻覆盖继承来的值。
使用场景：组件库主题切换时，常有人想靠父级 !important 一统到底，结果子组件局部样式轻轻一写就破防。
立即学习“前端免费学习笔记（深入）”；
- 继承的颜色没有“权重记忆”，子元素任何 color 声明都自动胜出
- 想锁死子元素颜色，必须在子选择器里也加
!important，不能偷懒靠继承 - 伪元素（如
::before）同样不继承!important，需单独处理
多个 !important 颜色规则打架，谁赢？
还是看选择器特异性。两个都带 !important 的规则，浏览器先比特异性（id 数 > class 数 > 标签名数），特异性一样才比书写顺序——后写的赢。
容易踩的坑：以为加了 !important 就天下无敌，结果 .btn-primary { color: #007bff !important; } 被 body .header a { color: #333 !important; } 干掉了，因为后者特异性更高（class + tag + tag = 0,1,2 vs 0,1,0）。
-
#nav a { color: red !important; }比.nav-link { color: blue !important; }优先 - 行内
style+!important（虽然语法非法，但某些旧版 WebKit 曾容忍）行为不可靠，一律避免 - PostCSS 或 Tailwind 等工具生成的 class，若含
!important，要确认其选择器结构是否真能压过你的自定义规则
用 !important 覆盖 CSS-in-JS 颜色时的兼容雷区
Emotion、Styled Components 这类方案默认给每个样式加哈希类名，特异性极低（基本是单 class），所以你写 button { color: red !important; } 很容易压过去。但问题在运行时：它们可能把 color 提取成内联 style，也可能注入 <style></style>，取决于 mode 和 SSR 设置。
性能影响：强制用 !important 会让 CSS 引擎跳过部分优化路径，尤其在频繁重绘的组件里，轻微但可测。
- Next.js App Router 下，客户端 hydration 后注入的样式可能晚于你的全局 CSS，导致闪屏——此时
!important不是解法，得用useEffect延迟覆盖 - Chakra UI 的
sxprop 会生成内联 style，!important对它无效，得用__css或主题覆盖 - 调试时，Chrome DevTools 里看到被划掉的 color，别急着加
!important，先点开“Computed”面板看真实生效源
!important 的规则，而是判断什么时候它根本不是该出手的地方。
