类选择器无法覆盖行内样式因特异性10＜行内样式的1000，需用更具体选择器（如多标签组合或属性选择器）使总分≥1000，或合理使用!important应对第三方动态行内样式。
为什么类选择器无法覆盖行内样式
因为行内样式（style 属性）的特异性值是 1000，而任何纯类选择器（如 .btn）只有 10，ID 选择器也才 100。浏览器按特异性数值比大小，不是“后写的赢”，所以哪怕你把 .btn { color: blue; } 写在最后，它依然输。
用更具体的选择器强行提权
不需要 !important 也能赢，关键是让选择器总分 ≥ 1000。常见有效组合：
-
#app .container .btn（ID + 类 + 类 = 100 + 10 + 10 = 120 → 不够） -
div#header nav.main ul li a.btn（1 + 100 + 1 + 1 + 1 + 1 + 10 = 115 → 还是不够） -
body div#main section article p strong span.btn（多个标签叠加可快速逼近甚至超过 1000） - 更实用的写法：
[class~="btn"]或[style]这类属性选择器本身权重为 10，但和类组合后能稳定突破 1000，例如div[class~="btn"][data-role="action"]
什么时候必须加 !important
以下情况加 !important 是合理且必要的：
- 第三方组件动态注入的行内样式（比如 React 组件执行
element.style.width = '200px'） - 你无法控制 HTML 结构，又不能改 JS 行为，只能靠 CSS 干预
- 调试阶段快速验证是否是优先级问题：加一个
!important看样式是否立刻生效
但注意：!important 不能覆盖 JS 直接操作的 element.style.xxx —— 因为那本质仍是行内样式，且浏览器认为它“更新鲜”，会压过带 !important 的 CSS 规则。
立即学习“前端免费学习笔记（深入）”；
真正可持续的替代方案
硬拼选择器或滥用 !important 都是临时解法。长期维护建议：
- 用 CSS 自定义属性（
--btn-color）代替硬编码值，然后在容器上重设变量：#my-section { --btn-color: #28a745; } - Vue/React 中优先用
:deep()或className注入机制，而非全局覆盖 - 检查是否有框架自带的覆盖入口（如 Ant Design 的
prefixCls、Tailwind 的@layer）
最常被忽略的一点：即使你写了 !important，如果目标元素同时被 JS 执行了 element.style.color = 'red'，那 CSS 依然无效 —— 这时候得去查 JS 逻辑，而不是继续调样式表。
