行内样式总能覆盖外部CSS，因其特异性固定为1000，不参与选择器匹配，也不受加载顺序影响，直接绑定DOM元素并被浏览器视为“最终裁定者”，即使外部样式含!important也无效。
行内样式为什么总能覆盖外部 CSS
因为 style 属性的特异性（specificity）固定为 1000，不参与选择器匹配，也不受加载顺序影响。它直接绑定在 DOM 元素上，浏览器解析时会把它当作“最终裁定者”。哪怕你在外部 CSS 文件里写了 .btn { color: red !important; }，只要元素上有 style="color: blue"，显示的还是蓝色。
- 常见错误现象：
display: none在里写了，但元素仍显示——检查 Elements 面板，大概率是 JS 动态设置了element.style.display = 'block'，或框架（如 React 的style={{}}）注入了内联样式 -
!important在外部样式中对行内样式无效；只有写在style属性里的!important才合法（但 HTML 规范不支持，所以实际无法写） - Vue 的
v-bind:style、React 的style={{}}、Svelte 的style:xxx，最终都渲染成style属性，同样具有 1000 权重
临时加
在 或 开头插入 是最快验证样式是否生效的方式，但它属于内部样式表，优先级低于行内样式、高于外部 CSS。
- 它生效的前提是：目标元素没被
style属性或 JS 动态 style 覆盖；否则你改了也看不到效果 - 多个
标签之间按文档流顺序覆盖：后写的规则覆盖先写的，和外部 CSS 文件的加载顺序逻辑一致 - Chrome/Edge 开发者工具中，在 Styles 面板顶部点 “+” 可新建临时
块，刷新即消失，适合快速试错 - 别忘了删——残留的
会干扰后续协作或上线检查，尤其当它用高特异性选择器（如#app .header button）覆盖了组件库默认样式时
如何判断是不是被行内样式劫持了
打开 DevTools → 选中元素 → 切到 Computed 标签页 → 找目标属性（比如 color），展开后看来源。如果某条声明带删除线，且来源写着 “element.style”，那就是它在起效。
- Elements 面板里直接看该元素的
style属性值，非空即生效；注意 JS 设置的是驼峰命名（backgroundColor），但 HTML 里写的是短横线（background-color） - 运行时动态设置的样式，可能不会出现在原始 HTML 中，但会在 Elements 面板实时显示出来
- 若看到某属性被划掉、又没在
style属性里找到对应项，大概率是 JS 执行后写入了element.style.xxx
想绕过行内样式，只能靠 JS 清除或接管
没有纯 CSS 方案能“压过”行内样式。唯一可控的做法，是在 JS 中主动干预 element.style。
- 清空全部：
element.removeAttribute('style') - 只删某条：
element.style.removeProperty('opacity') - 保留部分再操作：先存
const saved = element.style.cssText，操作完再赋回去 - 更推荐的方式是切换 class 控制：
element.className = 'btn btn-lg'，把样式控制权交还给 CSS 类名体系
真正难处理的不是怎么覆盖，而是谁在什么时候往 style 上写了什么——尤其在第三方库或封装组件里，style 可能由生命周期钩子、动画帧回调或 resize 监听器动态注入，得顺着 JS 调用栈一层层查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
