行内样式默认覆盖外部样式，因其权重为(1,0,0,0)，首位a=1直接胜出；解法仅三种：避免行内样式、用CSS变量、谨慎用!important；且行内样式不响应伪类与动画。
行内样式默认会覆盖外部样式，这是 CSS 层叠规则的必然结果
是的，style 属性写的行内样式，只要没有 !important 干扰，一定会覆盖外部样式表中同名属性——不是“可能”，而是浏览器强制执行的优先级规则。它的权重固定为 1000，远高于 ID 选择器（100）、类名（10）甚至一长串嵌套选择器（比如 #app .list li.active:hover 也才 121）。
为什么用更复杂的选择器也盖不过行内样式？
因为权重不是算术加法，而是四元组逐位比较：(a,b,c,d)。行内样式的 a=1（代表存在 style 属性），其他所有外部选择器的 a=0，比到第一位就已分出胜负，后面全忽略。
- 错误认知：以为写
div#header.nav ul li a就能压过style="color:red"→ 实际权重仍是0,1,2,3vs1,0,0,0，前者直接失效 - 真实调试路径：打开开发者工具（F12），选中元素，在
Styles面板顶部看到element.style带attribute标签，且排在所有 CSS 规则最上方 → 这就是“霸道源头” - JS 动态设置
el.style.color = 'blue'、React 的style={{}}、Vue 的:style，都会生成等效的行内样式，同样触发该规则
想让外部样式生效，只有三种靠谱方式
别试图靠“写得更狠”赢过行内样式，它天生不讲道理。真正可落地的解法就三条：
-
删掉或避免生成行内样式：把
style="{{...}}"改成class="loading active"，再在外部 CSS 中定义.loading { opacity: 0.5; } -
用 CSS 变量接管控制权：外部定义
:root { --text-color: #333; }，行内写style="color: var(--text-color);"，后续只需改变量值，无需碰 HTML 或 JS -
仅在兜底场景用
!important：比如第三方 UI 库强行注入行内样式且无 class 覆盖入口，才在外部写color: green !important;；但一旦用了，后续所有相关样式都得跟!important，维护成本陡增
最容易被忽略的陷阱：行内样式无法被伪类和动画响应
写 style="opacity: 0.8" 后，:hover { opacity: 1 } 不生效，transition: opacity 0.3s 也捕获不到变化——因为行内样式不参与 CSS 状态计算和过渡链。这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
真正需要交互或动效的地方，必须放弃直接操作 style，改用 classList 切换状态类，或用 setProperty('--opacity', '0.8') 配合 var(--opacity)，才能让样式活起来。
