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

【问题标题】：Media Query being overridden by previous rule媒体查询被先前的规则覆盖
【发布时间】：2013-03-12 20:39:32
【问题描述】：

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

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

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

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

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

编辑：我已经通过将 ID 选择器添加到媒体查询中解决了这个问题，但我将保留这个问题，因为我并不真正理解 为什么 它有效。 p>

【问题讨论】：

【解决方案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;
}

【讨论】：

【解决方案2】：

因为 id 很重要。

正确的方法：

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

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

【讨论】：