内联样式优先级最高（权值1000），会覆盖其他CSS规则；可通过开发者工具识别element.style，用CSS变量或class替代实现安全覆盖。
内联样式（style 属性）在 CSS 优先级中最高，会直接覆盖外部样式表、 标签中的规则，这是覆盖异常最常见的原因。
内联样式为什么总“赢”？
CSS 优先级按“权值”计算：内联样式的权值为 1000，ID 选择器是 100，类/属性/伪类是 10，标签/伪元素是 1。即使你写了 #header .nav li a:hover 这样很长的选择器，权值也才 100+10+1+1=112，仍低于内联的 1000。浏览器渲染时，只要元素有 style 属性，对应属性就会被强制采用。
如何识别是不是内联样式惹的祸？
打开浏览器开发者工具（F12），选中元素，在 Styles 面板里看最上方是否显示 element.style，且带小箭头可展开 —— 这就是内联样式。它通常标为 “inline” 或 “attribute”，并显示在所有 CSS 文件规则之上。
- 检查 HTML 源码里是否有
style="color: red;"这类写法 - 留意 JS 是否动态设置了
element.style.xxx = ... - 框架（如 Vue/React）的绑定语法如
:style="{ color: textColor }"也会生成内联样式
不想删内联样式，怎么安全覆盖？
除非用 !important（不推荐），否则无法靠选择器权重反超内联样式。但可以换思路：
-
改用 CSS 变量：在
或外链 CSS 中定义--text-color: blue;，内联写成style="color: var(--text-color);"，后续只需改变量值 -
用 class 替代 style：把内联样式抽成 class，比如
class="highlight-text"，再统一控制 -
JS 动态改 class 而非 style：用
el.classList.add("active")替代el.style.color = "red"
调试建议：快速验证覆盖路径
在开发者工具中临时禁用内联样式（点击 element.style 左侧复选框），如果样式立刻恢复正常，就确认是它导致的覆盖。再结合 Sources 或 Elements 面板定位来源 —— 是手写 HTML、JS 注入，还是框架响应式渲染产生的。
基本上就这些。内联样式不是 bug，是设计使然；问题在于没意识到它的“霸道”。理清来源，用变量或 class 接管，覆盖异常自然消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
