css - 媒体查询被先前的规则覆盖

Question

我试图在小于 760 像素宽的屏幕中默认隐藏我的菜单。但由于某种原因，我的display:none规则没有生效。它被之前的规则覆盖，如下所示：

media="all"
#mainmenu {
           display:inline-block;
}

@media screen and (max-width: 760px)
.btncontent {
             display:none;
}

还值得注意的是，我有一个按钮，jQuery 通过添加内联样式来显示菜单。上面的代码是在按下按钮之前，没有内联样式。

我确定我在这里遗漏了一些非常简单的东西，但不确定是什么。提前致谢。

编辑：我已经通过将 ID 选择器添加到媒体查询中解决了这个问题，但是我将把这个问题保持开放，因为我真的不明白它为什么会起作用。

score 3 · Accepted Answer

是#mainmenu和.btncontent相同的元素吗？如果是这样，那么原因很简单，因为 ID 选择器比类选择器更具体。

@media规则不会以任何方式影响规则优先级；它们对 cascade 是透明的，所以样式解析就像封闭@media规则不存在一样发生。在您的示例中，当媒体查询完成时，浏览器会看到这一点，这清楚地表明带有 ID 的规则应该优先：

#mainmenu {
           display:inline-block;
}

.btncontent {
             display:none;
}

根据您将 ID 选择器添加到第二条规则的方式，您可以平衡或提示特异性，允许它按预期覆盖：

/* More specific */
#mainmenu.btncontent {
             display:none;
}

/* Equally specific */
#mainmenu, .btncontent {
             display:none;
}

score 1 · Accepted Answer

因为身份证很重要。

正确的路：

media="all"
#mainmenu {
       display:inline-block;
}

@media screen and (max-width: 760px)
#mainmenu {
         display:none;
}

2 回答 2