内联样式（style属性）权值为1000，优先于外部css（最高约110）及!important；定位需检查elements面板的style属性或styles面板中被划掉且来源为element.style的声明；修复只能清除内联样式或改用class控制。
内联样式（style 属性）总是优先于外部样式表生效，这不是“谁先加载谁赢”，而是浏览器层叠规则里写死的权值：内联样式 specificity = 1000，外部 CSS 即使用 #app .btn:hover（最多约 110）也打不过它。
为什么改了外部 CSS 文件，页面颜色还是没变
常见错误现象：button { color: blue; } 在 main.css 里写了，但按钮文字仍是红色——检查 DOM 元素，大概率发现它带了 style="color: red"。
- 内联样式不是“可选覆盖”，而是强制接管；哪怕外部用了
!important，只要没写进style属性，就无效 - 框架（如 React 的
style={{}}、Vue 的:style）最终都渲染成style属性，同样触发 1000 权值 - JS 动态设置
element.style.color = 'red'和手写style="color: red"效果完全等价
如何快速定位是否被内联样式覆盖
打开 DevTools → Elements 面板 → 找到对应元素 → 直接看标签上有没有 style 属性；如果有且含目标属性（比如 background-color），基本就是它在起效。
- 更稳妥的方式：切换到 Styles 面板 → 找到该属性 → 看右侧 Computed 标签页里，这条声明是否被划掉、来源是否标为
element.style - 注意：JS 设置的是
backgroundColor（驼峰），但 DOM 中显示为background-color，别漏查 - 如果看到划掉的规则但没找到
style属性，说明是运行时 JS 修改了element.style.xxx，得搜相关脚本逻辑
想让外部样式重新生效，只能清内联或换 class
没有“绕过”方案，浏览器规范不允许。唯一可控路径是把控制权交还给 CSS 类名。
- 清空全部内联样式：
element.removeAttribute('style') - 只删某条：
element.style.removeProperty('color') - 改用 class 控制：
element.className = 'btn btn-primary'或element.classList.replace('urgent', 'normal') - 若需保留部分动态样式（如
width），先备份再操作：const saved = element.style.cssText; element.style.cssText = '';→ 应用 class → 再恢复必要项
真正容易被忽略的点：很多人以为“把 <link> 放在 <style></style> 后面就能压过内联”，其实完全无关——内联不参与文档流顺序比拼，它永远在最顶层。排查时必须跳过“谁在 head 里靠后”这种思维，直奔元素本身和 computed 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
