内联样式（style属性）优先级固定为1000，不参与css选择器权重计算，因此外部样式无论多具体或带!important均无法覆盖；验证需检查devtools中element.style来源及getcomputedstyle结果。
因为!important不是“绝对胜利”，它只把声明提到最高优先级层级，但同层级里仍要按来源顺序、权重四元组和定义位置决胜负。
内联样式（element.style）永远赢过外部CSS里的!important
哪怕你写了.btn { color: red !important; }，只要目标元素有style="color: blue;"，这条规则就会被划掉。浏览器把element.style视为“直接指令”，优先级固定为 1000，不参与选择器权重计算——!important再强也跨不过这道层级鸿沟。
验证方法：
- 在 DevTools 的 Elements 面板中看是否有带
style=""的行 - 切换到 Computed 面板，点开属性值右侧箭头，确认来源是否标着
inline - 运行
getComputedStyle($0).color，如果返回的是内联值，说明 JS 或框架已写死
两个!important相遇，比的不是谁更“重”，而是谁更“后”
当两条规则都带!important，比如.btn { color: red !important; }和button[disabled].ant-btn { color: #ccc !important; }，浏览器不会加权比较，而是看哪条规则在 CSSOM 中解析得更晚——也就是加载顺序靠后、或在 DevTools 的 Computed 面板里排在下面的那条生效。
常见踩坑点：
- 第三方库（如 Ant Design）在 JS 运行时动态插入带
!important的内联样式，你的 CSS 根本没机会参与比对 - 用了
@layer却没统一声明顺序，比如你的规则在@layer components，而库用了@layer utilities，后者天然更高 - 用户代理样式（如
input::-webkit-inner-spin-button）自带!important，必须用完全匹配的伪元素才能覆盖
transition 等动态属性加!important几乎必然失效
给transition加!important（如transition: all 0.3s ease !important;）会让浏览器把它当作一次性快照，而非持续监听的状态上下文。结果就是：类切换后只进不出、:hover有效但离开跳变、甚至全程无动画。
根本原因：
- 后续任意一个无
!important的transition: none;都能把它踢掉 - display 切换（
none↔block）会彻底绕过过渡机制，哪怕transition写得再高权也没用 - 推荐做法是用基础类长期持有：
.transition-opacity { transition: opacity 0.2s ease; }，HTML 中始终保留该 class，状态变更只改其他类
真正难处理的，是那些你看不见的对手
被划掉的color: red !important;背后，可能藏着三类你没意识到的覆盖源：
-
element.style：JS 直接写的el.style.color = 'blue'，或框架注入的style="color: blue !important" -
@layer分层：你没声明@layer，而第三方库用了@layer components，你的规则自动降权 - Shadow DOM：元素内部有
#shadow-root，普通 CSS 选不到，必须用::part()或:host
这些情况里，!important 不是解法，而是掩盖了你没看清渲染链路的事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
