25

USB経由で携帯電話に接続して、Chrome ADBプラグインからこれを取得しています。基本的に、Android クロムの要素を検査し、接続された PC でそれらを表示または変更できます。

この奇妙な問題が発生しています。メディア クエリは一般的なクラス ルールを覆すものだと思っていましたが、この画像を見ると、メディア クエリ ルールが覆されていることがわかります。追加することでこれを修正できます!importantが、そうしないほうがよいと思います。また、非メディア クエリ コンテナ h1 のルールがメディア クエリ ルールの後に宣言されていることも認識しています。それが理由なのか、それとも別の理由があるのか​​ はわかりません。なぜこれが起こっているのか誰でも説明できますか？

ここに画像の説明を入力

CSS コード:

@media screen and (max-device-width: 767px) {
  .container > h1 {
    font-size: 40px;
    line-height: 40px; }
    ...some more rules... }
.container > h1 {
    margin: 0;
    font-size: 80px;
    font-weight: 300;
    line-height: 80px; }

編集 - 例を追加

これを参照してください: http://jsfiddle.net/djuKS/ ルールの順序を入れ替えると、動作が期待どおりになることに注意してください。しかし、デフォルトではメディアクエリは上書きされています

4

1 に答える 1

32

メディア クエリは一般的なクラス規則を覆すものだと思っていましたが、

MQ 内のルールは、at-media の条件に応じてのみ適用されることを除いて、セレクターの優先度に関して他のルールと同様です。

(...) また、メディアクエリされていないコンテナ h1 のルールがメディアクエリルールの後に宣言されていることも認識しています。

正しい理由が見つかりました。どちらのルールも、まったく同じセレクターを持っているため、まったく同じ優先度 (特異性) を持っています。プロパティが両方のルールの一部である場合 (および宣言が有効で、両方またはいずれにも!important修飾子がない場合)、最後に記述された宣言の値が適用されます。
これが、MQ が常に最後に記述されているのを見つける理由です (条件付きクラスを介して IE8 に適用されるルールを除き、MQ と最新のブラウザーおよび IE8 との間で重複する可能性はありません:))

于 2013-08-23T06:11:59.003 に答える