css - メディアクエリ CSS 重要

Question

レスポンシブ Web サイトの作成、

私はこれを書きました、それは動作しません。

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

しかし、私はこれを書きました、それはうまくいきます！

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

なんで？:(

Answer 1

!importantインライン スタイル、またはページで優先される可能性があるより具体的なスタイルをオーバーライドします。

たとえば、この要素のスタイルをオーバーライドできます...

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

これをスタイルシートに追加することで...

div { background-color: black !important }

ただし、インライン スタイルに追加!importantすると、それが優先されます。たとえば、...

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

これは、概念をもう少し詳しく説明する良いスタックオーバーフローの回答です。

Answer 2

css コードを確認してください。特定性の高いものが #nav 要素を変更しています。

Answer 3

これはちょっとした概念です:

!importantstyle 属性の後、そのスタイルに高い優先度が与えられます。それがあなたのcssが機能している理由です。 !important同じコンテキストで定義された既存のスタイルシート属性をオーバーライドします。