行内样式（element.style）总是赢，因其权重四元组a=1，而所有外部选择器a=0，首位比较即胜出；解决方式仅三种：删除行内样式、用css变量接管、或仅兜底时用!important。
不能被外部样式表直接覆盖，除非你绕开它、删掉它，或者用 CSS 变量把它变成“可变的靶子”。
为什么 element.style 总是赢？
CSS 权重不是比谁写得长，而是按四元组 (a,b,c,d) 逐位比较。行内样式自带 a=1，所有外部选择器（哪怕 #app .header > nav li a:hover）的 a 都是 0 —— 第一位就输了，后面全作废。
常见错误现象：Styles 面板里你的规则被划掉，来源标着 element.style；加了 !important 也没用；删掉元素上的 style 属性，样式立刻生效。
-
style="color: red"和.btn { color: blue !important; }同时存在 → 显示红色 -
React的style={{}}、Vue的:style、Svelte的style:xxx，最终都生成等效的element.style - JS 动态赋值如
el.style.display = 'block'，同样触发该机制
怎样让外部样式“重新说话”？
硬刚没用，只有三条实际可行的路径：
- 删掉或避免生成行内样式：把
style={{opacity: 0.5}}改成className="loading"，再在外部 CSS 里写.loading { opacity: 0.5; } - 用 CSS 变量接管：外部定义
:root { --bg-color: #fff; }，行内写style="background-color: var(--bg-color);"，后续只需改变量值 - 仅在兜底场景用
!important：比如第三方组件强行注入style且不暴露 class 入口，才在外部写.third-party-input { border: 2px solid #1890ff !important; }—— 但一旦用了，后续所有相关样式大概率也得跟!
调试时怎么快速定位是不是 style 搞的鬼？
打开开发者工具（F12），选中元素，在 Styles 面板顶部找带 attribute 标签、写着 element.style 的那一块 —— 它永远排最上面，且展开后能看到所有被 JS 或框架动态写入的属性。
- 如果看到
display: block被划掉，但元素却显示了，大概率是element.style.display = 'block'覆盖了你的.hidden { display: none; } - 临时加
<style></style>调试时，注意它属于内部样式表，权重低于element.style，所以改了也看不到效果 - Chrome DevTools 的
Styles面板顶部点 “+” 可新建临时<style></style>，刷新即消失，适合快速验证是否被行内样式压制
真正难的不是理解规则，而是识别哪些 style 是框架自动加的、哪些是自己手抖写的、哪些是第三方 SDK 偷摸塞的 —— 它们混在一起时，element.style 就像一个不声不响的“最终裁定者”，连 !important 都得排队等它点头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
