媒體查詢被前面的規則覆蓋

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; 
}