媒體查詢CSS重要

Question

製作響應式網站，

我寫了這個，它不起作用。

@media (max-width: 767px) { 
    #nav { display:block; } 
} 

但是，我寫了這個，它的工作原理！

@media (max-width: 767px) { 
    #nav { display:block !important; } 
} 

爲什麼？ :(

Answer 1

檢查你的CSS代碼，一些具有較高的特異性改變你的#nav元素

Answer 2

這是一個小的概念：。

!important style屬性後高度重視的是風格，是爲什麼你的CSS正在然後。 !important覆蓋相同的上下文中定義的現有的樣式表屬性。

Answer 3

!important將覆蓋任何內嵌樣式，或者更具體的風格，可在網頁上採取優先次序。

例如，你可以在你的樣式表添加這個覆蓋樣式此元素上...

<div style='background-color:white'></div> 

...

div { background-color: black !important } 

但是！如果你添加!important到內嵌樣式，則它將優先，例如...

<div style='background-color:white !important'></div> 

here是好的stackoverflow答案更詳細地解釋了這個概念。