内联样式权值固定为1000（即(1,0,0,0)），不参与选择器权重比拼，浏览器直接采用style属性值；react/vue等动态设置等效于内联，无法被外部css覆盖，唯一解法是移除或替换style属性。
内联样式权值固定为1000，不参与选择器权重比拼
浏览器层叠规则里写死了一条：只要元素有style属性，对应属性的权值就是(1, 0, 0, 0)（即1000），而外部CSS里最重的选择器——比如#app .btn:hover——权值最多也就(0, 1, 1, 2)（约112）。这不是“谁写得晚谁赢”，也不是“谁在HTML里靠后谁赢”，而是渲染时直接跳过比对，强制采用style里的值。
常见错误现象：button { color: blue; }在main.css里写了，但按钮文字还是红色——打开Elements面板一看，元素上明晃晃写着style="color: red"。
React/Vue/JS动态设置等效于手写style属性
React的style={{}}、Vue的:style="{}"、jQuery的.css()、原生JS的element.style.color = 'red'，最终都落地为DOM上的style属性，同样触发1000权值。
注意：element.style.backgroundColor是驼峰写法，但在Elements面板里看到的是background-color，别漏查这个转换。
-
Vue中v-if导致节点重建，新节点又带上了新的style绑定 -
Shadow DOM里，style只作用于light DOM，无法穿透到shadow根内部
开发者工具里怎么一眼确认是它在作怪
打开DevTools → Elements面板 → 找到目标元素：
- 标签上直接有
style=""？基本就是它 - Styles面板顶部出现
element.style，且展开后含你要调的属性？确认无疑 - 某条规则被划掉，但来源标着
inline或attribute？那就是style在接管
快速验证：在Styles面板里点击element.style左侧复选框临时禁用它，如果样式立刻恢复正常，问题根源就锁定了。
真没法绕过，只能交还控制权
没有“提高外部选择器权重就能压倒内联”的操作空间。浏览器规范不允许绕过style属性的1000权值。唯一可控路径是把样式控制权从style属性手里拿回来：
- 清空全部：
element.removeAttribute('style') - 删单条：
element.style.removeProperty('color') - 换class：
element.className = 'btn btn-primary'或element.classList.replace('urgent', 'normal') - 保留部分动态值：先备份
const saved = element.style.cssText，再清空，应用class，最后恢复必要项（如element.style.width = savedWidth）
真正复杂的地方在于：很多人以为“把<link>放在<style></style>后面就能压过内联”，其实完全无关——内联不参与文档流顺序比拼，它永远在最顶层。排查时必须跳过“谁在 head 里靠后”这种思维，直奔元素本身和 computed 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
