内联样式能覆盖外部CSS因权值1000远高于ID选择器（如#header .nav a仅120），且优先级规则中style属性权重最高，即使外部CSS用!important也无效；动态设置element.style.color或框架:style绑定均等效于内联样式。
内联样式为什么能覆盖外部 CSS 文件
因为浏览器渲染时，CSS 优先级规则里明确写了：style 属性（即内联样式）的权重高于任何外部或内部 <style></style> 规则，哪怕后者用了 !important —— 除非那个 !important 也在内联里。
这不是“谁写在后面就赢”，而是计算 specificity（权值）的结果：style="color: red" 的权值是 1000，而 #header .nav a 最多也就 120（1 id + 2 class + 1 tag）。
- 外部 CSS 文件里的
.btn { color: blue }，永远打不过<button style="color: red"></button> - 即使外部文件用
.btn { color: blue !important }，只要没写进style属性，依然无效 - 动态设置
element.style.color = 'red'和写死style="..."效果等价，都算内联样式
如何检查某个样式是否被内联覆盖了
打开 DevTools → 选中元素 → 看 Styles 面板右侧的“Computed”标签页，找到目标属性（比如 color），点开它，会显示所有影响该值的来源，并用删除线标出被覆盖的规则。
更直接的方法是看 Elements 面板里该元素的 style 属性有没有对应声明；如果有，且值非空（不是 ），那大概率就是它在起效。
立即学习“前端免费学习笔记（深入）”；
- 注意
style属性里写的是background-color，但 JS 设置时用的是backgroundColor（驼峰） - 某些框架（如 Vue）的
:style或 React 的style={{}}最终也会渲染成内联style属性，同样具备高优先级 - 如果看到某条样式被划掉但又没在
style属性里找到对应项，可能是 JS 在运行时动态设置了element.style.xxx
想绕过内联样式强制用外部 CSS 怎么办
基本没得绕——这是浏览器规范定死的。唯一合法且可控的方式，是在 JS 中主动清空或重写内联 style，把控制权交还给 CSS 类名。
不要试图用 !important 在外部文件里硬刚，那只会让后续维护的人抓狂；也不要用 document.write 或 innerHTML 覆盖整个节点来“清除”内联样式，太暴力且易丢状态。
- 清空全部内联样式：
element.removeAttribute('style') - 只删某条：
element.style.removeProperty('color') - 改用 class 控制：
element.className = 'btn btn-primary';或element.classList.replace('urgent', 'normal') - 若必须保留部分内联样式（如 width/height 动态计算所得），可先备份再删，操作完再恢复：
const saved = element.style.cssText; element.style.cssText = ''; /* do stuff */ element.style.cssText = saved;
为什么修改 style.cssText 有时不生效
因为 cssText 是一个 setter，它会**完全替换**当前内联样式字符串，而不是合并。如果你只赋值 'color: red'，那原来可能存在的 font-size、margin 就全丢了。
更隐蔽的问题是：某些浏览器（特别是旧版 Safari）对 cssText 的解析比较严格，末尾少个分号、多了个空格、用了不支持的单位（如 lh），都可能导致整条失效，且不报错。
- 推荐用单个属性赋值代替
cssText，比如el.style.color = 'red'; el.style.fontSize = '14px'; - 如果真要用
cssText，确保字符串完整、语法合规，结尾加分号：el.style.cssText = 'color: red; font-size: 14px;' - 避免在循环里高频读写
cssText，性能差，还容易触发 layout thrashing
内联样式的优先级是确定的，但它的“确定性”恰恰是最容易让人误判的地方——你以为删了个 class 就万事大吉，结果 JS 某处悄悄写了 el.style.display = 'block'，然后你花二十分钟在 CSS 里加 !important 找不到原因。
