Chrome内核浏览器不识别CSS media query样式问题求助

云上老周

2026-9-24

问题原因

你使用的是CSS原生嵌套语法，不同浏览器内核的支持度和解析逻辑存在差异：
- 火狐、旧版Edge（EdgeHTML内核）、IE要么实现了符合标准的嵌套解析规则，要么你的运行环境引入了CSS预处理器实时编译降级了嵌套语法，所以样式生效正常。
- Chromium内核的浏览器（Chrome、Brave、Electron）在112版本之前完全不支持原生嵌套，112~118版本存在已知解析bug：媒体查询内部的嵌套选择器优先级计算错误，会低于外部同权重的常规选择器，就算媒体查询匹配成功，内部规则也会被外部规则覆盖。
Electron中红色背景闪现的原因：CSS解析是逐行执行的，启动阶段媒体查询内的规则会先被短暂应用，等整个样式表解析完成后，Chromium的优先级计算bug触发，外部的黑色背景规则覆盖了红色规则，因此出现闪退后变回黑色的现象。

解决办法

方案1（全兼容首选）

直接展开嵌套语法，使用通用的后代选择器写法，所有浏览器都可以正常识别，不存在兼容性问题：

.mainwindow .popup {
    background: black;
}

@media screen and (max-width: 640px){
    .mainwindow .popup {
        background: red;
    }
}

方案2（保留嵌套写法）

在嵌套选择器前明确添加&标识符，符合最新CSS原生嵌套规范，可修复大部分Chromium版本的优先级计算bug：

.mainwindow {
    & .popup {
        background: black;
    }
}

@media screen and (max-width: 640px){
    .mainwindow {
       & .popup {
            background: red;
        }
    }
}