行内样式优先级最高，因其 specificity 固定为(1,0,0,0)=1000，首位a位直接胜出；!important不改变权值，仅在已胜规则内生效，故无法覆盖行内样式。
行内样式优先级总是高于外部 CSS，不是因为“离得近”或“浏览器偏好”，而是 CSS 规范硬编码的权值规则：它的 specificity 固定为 (1,0,0,0)，即 1000，而所有外部选择器（哪怕写成 #app .container > ul li.active:hover）最高也就 (0,1,2,1) = 121 —— 比到第一位 a 就已落败，后面三位根本不会参与比较。
为什么 !important 外部规则也压不住行内样式？
因为 !important 不改变 specificity，它只在“已胜出的那条规则内部”起豁免作用。浏览器处理顺序是：先按 specificity 决定哪条规则赢，再看赢家是否带 !important。行内样式权值 1000 已直接胜出，外部规则根本没机会进场。
- 有效覆盖方式只有一种：把
!important也加进style属性里，比如style="color: red !important;"—— 但这等于自己覆盖自己，无工程意义 -
.btn { color: blue !important; }对<button style="color: red"></button>完全无效 - 框架中
:style="{ color: 'red' }（Vue）或style={{ color: 'red' }}（React）同样生成真实style属性，权值也是 1000
怎么快速确认是不是行内样式在拦截？
打开开发者工具（F12），选中元素，在 Styles 面板顶部找 element.style 区域 —— 它永远排第一，带小箭头可展开。如果这里出现了你要覆盖的属性（比如 background-color），那就基本锁定源头。
- 检查 HTML 源码是否有手写的
style="..." - 如果是框架渲染，搜索
:style、v-bind:style或style={}绑定位置 - 注意 JS 动态赋值如
el.style.color = 'blue'也会实时生成/覆盖element.style
真正能绕过行内样式副作用的替代方案
硬写更高权值选择器或堆砌 !important 是徒劳的。可靠解法只有三条，且都绕开直接操作 style 属性：
- 用 class 切换代替：把
el.style.opacity = '0.5'改成el.classList.add('is-loading')，再在 CSS 里写.is-loading { opacity: 0.5; } - 用 CSS 自定义属性接管：在
:root定义--opacity: 1;，元素写style="opacity: var(--opacity);"，JS 只需document.documentElement.style.setProperty('--opacity', '0.5') - 对第三方库注入的行内样式兜底：用属性选择器 +
!important，如button[style*="opacity"] { opacity: 0.5 !important; }—— 但这是最后手段，且无法响应伪类或 transition
最容易被忽略的是：行内样式不参与伪类匹配（:hover、:focus）和 CSS 动画/过渡链。一旦你写了 style="opacity: 0.8"，:hover { opacity: 1 } 和 transition: opacity 0.3s 全部失效 —— 这不是 bug，是规范行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
