行内样式难覆盖因其特异性为1000级，远超id（100）、类（10）和标签（1）选择器；唯一合法稳定覆盖方式是谨慎使用!important，优先结合高特异性选择器；应优先从源头避免行内样式，如改用classname、data属性或classlist。
行内样式 style 为什么难覆盖？
因为它的 CSS 特异性（specificity）是 1000 级，比任何 ID 选择器（100）、类名（10）或标签（1）都高。哪怕你写 #app .list li.active，权重也才 121 —— 压不住 style="color: red"。
这不是浏览器 bug，是规范设计：行内样式代表“最靠近元素的意图”，优先级天然最高。
怎么让外部 CSS 覆盖 style 属性？
唯一合法、稳定的方式是用 !important，但必须谨慎：
- 只对真正需要强干预的场景用，比如第三方组件注入的行内样式
- 避免在通用类里滥用，否则后续维护时容易陷入
!important套娃 - 优先用更具体的选择器配合
!important，而不是全靠它硬顶
例如：
.my-list > li[role="option"].is-selected { color: #1890ff !important; }
哪些情况其实不该硬刚 style？
很多看似“必须覆盖”的行内样式，其实是源头可改的：
- React/Vue 组件里传入的
styleprop —— 改成用className+ CSS 类控制 - 服务端渲染模板中拼接的
style="..."—— 抽到 class 中，用 data 属性驱动状态 - JS 动态设置的
element.style.color = "red"—— 改成element.classList.add("is-highlight")
强行覆盖不如切断来源；一旦 JS 多次写 style，CSS 就永远在追着跑。
用 [style] 伪属性选择器靠谱吗？
不靠谱。它只能匹配带 style 属性的元素，但无法区分属性值内容，更不能覆盖已生效的内联声明：
-
[style]权重只有 10，照样打不过style自身 - 它不能清除或修改内联样式，只是个匹配条件
- 某些框架（如 Vue）会把响应式 style 对象转成内联字符串，导致
[style]匹配不稳定
别把它当解药，它连止痛片都算不上。
真正难的不是怎么覆盖，而是判断哪些 style 是业务逻辑必需的、哪些只是历史惯性写的。删掉一个没被 JS 读取的 style，比写十个 !important 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
