CSS中!important如何影响颜色权重及覆盖机制？

本文共计1005个文字，预计阅读时间需要5分钟。

因为内联样式的优先级高于带 `!important` 的 CSS 规则，所以后者不会覆盖前者。

常见错误现象：div { color: blue !important; } 写得再狠，也改不掉 <div style="color: green;"> 里的绿色。

• 真要覆盖内联色，得用 JavaScript 直接改 element.style.color，或移除 style 属性
• 如果控制不了 HTML 输出（比如 CMS 生成），可用 [style*="color"] 属性选择器 + !important 强制，但兼容性差、维护难
• Vue/React 中尽量别靠内联 style 控制主题色，该走 class 就走 class

!important 在 CSS 颜色继承链里怎么失效的？

颜色本身可继承，但 !important 不继承。父元素设了 color: red !important;，子元素没显式声明 color，它会继承红色——但这红色“不带 !important 标签”，一旦子元素自己写了 color: blue;，哪怕没加 !important，也会立刻覆盖继承来的值。

使用场景：组件库主题切换时，常有人想靠父级 !important 一统到底，结果子组件局部样式轻轻一写就破防。