0

幅760px未満の画面では、デフォルトでメニューを非表示にしようとしています。しかし、何らかの理由で、私のdisplay:noneルールは有効になりません。次のように、以前のルールによって上書きされています。

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

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

また、jQueryがインラインスタイルを追加してメニューを表示するボタンがあることも注目に値します。上記のコードは、ボタンが押される前のものであり、インラインスタイルはありません。

私はここで本当に単純な何かを見逃していると確信していますが、何がわからないのです。前もって感謝します。

編集：メディアクエリにIDセレクターを追加することでこの問題を解決しましたが、なぜ機能したのかよくわからないため、この質問は開いたままにしておきます。

4

2 に答える 2

3

#mainmenuと.btncontent同じ要素ですか？もしそうなら、その理由は単にIDセレクターがクラスセレクターよりも具体的だからです。

@mediaルールはルールの優先順位にまったく影響しません。それらはカスケードに対して透過的であるため、スタイルの解決は、囲んでいる@mediaルールが存在しないかのように行われます。あなたの例では、メディアクエリが実行されると、ブラウザはこれを確認します。これにより、IDを持つルールが優先される必要があることが明確になります。

#mainmenu {
           display:inline-block;
}

.btncontent {
             display:none;
}

2番目のルールにIDセレクターを追加した方法に応じて、特異性のバランスをとるか、または傾けて、期待どおりにオーバーライドできるようにします。

/* More specific */
#mainmenu.btncontent {
             display:none;
}

/* Equally specific */
#mainmenu, .btncontent {
             display:none;
}
于 2013-03-12T12:39:32.880 に答える
1

IDが重要だからです。

正しい方法：

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

@media screen and (max-width: 760px)
#mainmenu {
         display:none;
}
于 2013-03-12T12:31:40.187 に答える