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

Question

默认情况下，我试图在宽度小于760px的屏幕中隐藏我的菜单。但出于某种原因，我的display:none规则未生效。它被先前的规则所​​覆盖，如下所示：

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

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

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

我确定我错过了一些非常简单的东西，但不确定是什么。提前谢谢。

编辑：我已经通过将ID选择器添加到媒体查询来解决了这个问题，但是我将打开这个问题，因为我不太明白为什么它有用。

Answer 1

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

@media规则不会以任何方式影响规则优先级;它们是transparent to the cascade，因此样式解析就像封闭的@media规则不存在一样。在您的示例中，当满足媒体查询时，浏览器会看到这一点，这清楚地表明具有ID的规则应该优先：

#mainmenu {
           display:inline-block;
}

.btncontent {
             display:none;
}

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

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

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

Answer 2

因为身份证很重要。

正确的方式：

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

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