媒体查询不适用于显示属性答案

【问题标题】：media query not working with display property媒体查询不适用于显示属性
【发布时间】：2022-01-01 10:07:12
【问题描述】：

我试图在屏幕宽度大于 1200 像素时隐藏菜单栏，并在屏幕宽度小于 1200 像素时显示它，但媒体查询没有给出我想要的结果。我正在使用 sass。

这是我的 CSS：

        .icon {
            flex: 0.2;
            align-items: center;
            justify-content: center;
            padding-right: 10px;

            .menubar {
                align-items: center;
                justify-content: center;
                **display: none;**

                i {
                    text-align: center;
                    width: 30px;
                    font-size: 30px;
                    line-height: 2;

                    &:hover {
                        color: $mainColor2;
                        cursor: pointer;
                    }
                }
            }
        }
    }

@media screen and (max-width: 1200px) {

    .icon {
        .menubar {
            **display: flex;**
        }
    }
}

这是我的导航栏 React 组件：

<nav className='navbar' ref={navRef}>
                <div className="icon">
                    <div className="darkmode-button">
                        <DarkMode></DarkMode>
                    </div>
                    <div className="menubar" onClick={() => setToggle(!toggle)}>
                        {toggle ? <i class="fas fa-times" onClick={() => closeNav()} /> : <i class="fas fa-bars" onClick={() => openNav()} />}
                    </div>
                    <div className="language">
                        <Language></Language>
                    </div>
                </div>
            </div>
        </nav>

【问题讨论】：

在 flex|none 之间翻转 .menubars display 似乎很好；也许它在您的样式表的其他地方被否决了？使用浏览器工具内容检查器 (Ctrl+Shift+C) 查看有效的值。
@Raxi 我看到 display:none 工作得很好，但是如果我将窗口拖到 1200 像素以下，样式仍然在内容检查器中的 display:none 之下。我在原始帖子中添加了一张照片供您查看。
它被否决了。似乎没有媒体查询的样式比原始样式更具体，因此它仍然应用旧样式。

标签： css sass

【解决方案1】：

由于您添加了内容检查器屏幕截图，它显示display 属性正在使用不同的选择器应用。我想这可能导致flex-variant 没有足够的特异性来击败none-variant。

您的display: none 适用于.navbar .right .icon .menubar，但是您的display: flex 适用于.icon .menubar。

我已经写了一个解释为什么这发生在另一个问题之前：CSS Works on custom Tag but not on DIV?

但修复很可能只是将display: flex 也包含在.navbar { .right { ... } } 中。

【讨论】：

你是绝对正确的。我现在将我的媒体查询更改为那个，它现在可以工作了。应该是简单的修复，但我不知道在内容检查器中划掉的样式意味着什么。非常感谢！
酷酷，应该可以。我添加了一个解释链接，以防 specificity 听起来像是一个新概念。