CSS @media媒体查询无法修改opacity透明度属性问题排查

问题根源 #

你的代码存在CSS语法错误：在媒体查询内部的规则块闭合大括号}后额外添加了分号，不符合CSS语法规范，会导致浏览器中断解析该分号之后的所有规则。

你代码里的错误示例如下：

@media (max-width: 991px) {
    nav#main-nav::after {
        background-image: none;
    }; /* 此处大括号后多余的分号是语法错误 */
    .navbar-brand {
        opacity: 0; 
    }; /* 此处多余的分号是语法错误 */
}
@media (min-width: 992px) {
    .nav-link {
        font-size: 14px;
    }; /* 此处多余的分号导致后面的opacity规则完全不被浏览器解析 */
    .desktop-collapse-on-scroll .navbar-brand {
        opacity: 1;
    }
}

这就解释了为什么同一个媒体查询内font-size生效、opacity不生效：font-size规则在错误分号之前能被正常解析，opacity规则在分号之后直接被浏览器忽略，所以开发者工具里也找不到对应的样式声明，自然不会出现被划掉的覆盖提示。

修复步骤 #

1. 删掉所有规则块闭合大括号}后面的多余分号，即可让opacity相关规则正常被识别。
2. 修正你的业务逻辑（当前逻辑和需求相反）：
   • 需求是移动端小Logo始终显示，所以不要在@media (max-width: 991px)里给.navbar-brand设opacity: 0，要设为opacity: 1
   • 桌面端默认状态下小Logo要隐藏，仅折叠头部时显示，所以需要在@media (min-width: 992px)里先给默认的.navbar-brand设置opacity: 0，添加desktop-collapse-on-scroll类后再设为opacity: 1

内容的提问来源于stack exchange，提问作者Mentalist