内联样式优先级最高但可能被覆盖，原因包括拼写错误、!important干扰、JS动态修改、DOM未渲染或Shadow DOM隔离；应通过开发者工具检查element.style及Computed值定位问题。
内联样式（style 属性）的优先级确实高于外部样式表和内部 块中的规则，但“覆盖不了全局样式”通常不是优先级问题，而是以下几种常见原因导致的。
style 写错了或没生效
检查是否拼写错误、语法不合法，或者属性值被浏览器忽略。比如：
-
color: #fff;写成colour: #fff;（英式拼写无效） -
display: flex;在不支持的旧版 IE 中可能不生效 - 用了 CSS 变量但未定义，如
color: var(--text-color);却没在 :root 或父级设该变量
选择器权重干扰了内联样式的“表现”
内联样式本身优先级最高（specificity = 1000），但有两点例外：
-
!important：全局样式里加了
!important，会压过普通内联样式（除非内联也加!important） - JavaScript 动态修改：后续 JS 覆盖了你写的
style，比如 Vue/React 的响应式更新、或 jQuery 的.css()调用
元素实际渲染的不是你写的那个 DOM
尤其在框架开发中很常见：
立即学习“前端免费学习笔记（深入）”；
- Vue 中
v-if或v-show导致元素被销毁/隐藏，你加的style没挂到最终渲染节点上 - React 使用了
className而非style，或用styled-components等库生成了带哈希的类名，覆盖逻辑变了 - Shadow DOM 隔离了样式作用域，内联样式只在 light DOM 生效，无法穿透到 shadow 根内部
怎么确认和解决？
打开浏览器开发者工具（F12），选中元素，在 Styles 面板看：
- 左侧是否显示
element.style，且对应属性没被划掉（划掉=被更高优先级覆盖） - 如果被划掉，点开被划掉的那条，看右边 “Computed” 面板确认最终生效值从哪来
- 想强制生效？可加
!important：（慎用，仅调试或极简场景）基本上就这些。内联样式不是万能钥匙，但只要定位准、写得对，99% 的覆盖问题都能解决。
