CSS で非メディア クエリがメディア クエリをオーバーライドすることがあるのはなぜですか?

メディア クエリと非メディア クエリ: CSS の特異性を理解する

CSS では、メディア クエリを利用してデバイス画面に基づいてスタイルを適用します。サイズやその他のビューポートの特性。ただし、通常の CSS 宣言と比較してメディア クエリの優先順位が低いように見えることがよくあります。

優先順位が低い理由

この動作は、CSS カスケードの概念に由来しています。 。複数のルールが同じ要素をターゲットにしている場合、ブラウザはその特異性に基づいてルールに優先順位を付けます。より高い特異性を持つセレクターは、より低い特異性を持つセレクターをオーバーライドします。

メディア クエリは本質的にセレクターの特異性を強化しません。したがって、非メディア クエリ セレクターとメディア クエリ セレクターの特異性が同じである場合、メディア クエリが無関係な場合は非メディア クエリ セレクターが優先されます。

例:

次の CSS スニペットを考えてみましょう:

.logo img {
    width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }
}

この例では、非メディア クエリ ルールロゴ画像のデフォルトの幅 100% を定義します。ただし、画面幅が指定された範囲内にある場合、メディア クエリがアクティブになり、幅が 120% に設定されます。

ただし、画面幅がこの範囲外の場合は、非メディア クエリ ルールが適用されます。メディア クエリの幅設定をオーバーライドする優先順位。

増やすための解決策優先度

メディア クエリの優先度を上げるには:

1. ルールセットの順序を入れ替えます:

   • カスケードを利用するには、メディア クエリ ルールを非メディア クエリ ルールの下に移動します。 order.

2. セレクターの特異性を高める:

   • 追加のタグまたは属性を追加して、メディア クエリ セレクターの特異性を強化します。セレクター。たとえば、.logo a img に変更すると、その具体性が高まります。

3. 使用!重要 (注意):

   • この方法では、メディア クエリ ルールに「! important」を追加します。ただし、メンテナンスの問題を引き起こす可能性があるため、推奨されません。

以上がCSS で非メディア クエリがメディア クエリをオーバーライドすることがあるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。