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

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

因为id很重要。

正确方法：

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

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