内联样式压倒媒体查询，因其特异性(1,0,0,0)高于任何外部选择器权重，且媒体查询不改变权重；!important在媒体查询中仍输于内联样式，唯一有效解是移除内联样式或用JS直接操作style属性。
内联样式为什么压倒媒体查询
内联样式（style 属性）的特异性是 (1,0,0,0)，而任何外部 CSS 里的选择器——哪怕写成 .btn.btn.btn[role="button"] ——其权重最多是 (0,0,3,1) 或 (0,0,4,0)。媒体查询不改变选择器权重，只控制规则是否启用。所以只要 HTML 里写了 style="color: blue"，哪怕媒体查询里写 color: red !important，也得跟内联样式“硬刚”。
检查是否真被内联样式卡住
打开开发者工具选中元素，在 Styles 面板里找带删除线的 color、padding 等属性，鼠标悬停看提示：如果显示 This rule was overridden by inline style，那就坐实了。注意：Computed 面板里显示的最终值，来源一定是 element.style。
- 常见伪装：Vue/React 框架在渲染时自动注入
style，比如v-bind:style或style={{ color: 'blue' }} - 第三方库（如某些 UI 组件）可能动态写入
style，刷新后才出现 -
all: unset或inherit会干扰继承链，但不会绕过内联样式的优先级
绕过内联样式的可行路径
不能删内联样式？那就得用更高级别的“插队”手段。但注意：!important 在媒体查询里依然输给内联样式，必须配合更高权重或强制覆盖机制：
- 加
!important+ 更高特异性选择器：@media (max-width: 768px) { .container > .btn[style] { color: red !important; } }—— 利用属性选择器[style]提升权重，再叠!important - 用 JavaScript 动态移除或改写内联样式：
el.removeAttribute('style')或el.style.color = ''，再让媒体查询自然生效 - Vue 中用
:style="{ color: isMobile ? 'red' : 'blue' }"替代静态内联，把响应逻辑收归 JS 控制 - 避免在 HTML 源码里硬写
style，改用 class 控制，把所有视觉状态交给 CSS 管理
为什么 !important 单独写在媒体查询里没用
因为浏览器层叠顺序是：内联样式 > !important 外部规则。你写 .btn { color: red !important; }，权重仍是 (0,0,1,0) + 强制插队；而 style="color: blue" 是 (1,0,0,0) + 强制插队，前者永远输。真正能赢的只有两种情况：一是去掉内联样式本身，二是用 JS 直接干预 DOM 的 style 属性。
立即学习“前端免费学习笔记（深入）”；
最隐蔽的坑是框架自动注入的内联样式——它不显现在原始 HTML 里，却真实存在且不可被纯 CSS 覆盖。这时候查 element.style 比翻源码更可靠。
