ホームページ > ウェブフロントエンド > CSSチュートリアル > 通常の CSS ルールが CSS のメディア クエリをオーバーライドするのはなぜですか?

通常の CSS ルールが CSS のメディア クエリをオーバーライドするのはなぜですか?

DDD
リリース: 2024-12-22 05:30:15
オリジナル
635 人が閲覧しました

Why Do Regular CSS Rules Override Media Queries in CSS?

メディア クエリと 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% に設定されます。

回避策

通常の CSS ルールよりもメディア クエリを優先するには、2 つのオプションがあります:

1.ルールの順序を入れ替え

メディア クエリが非メディア クエリ ルールの後に来るように CSS ルールを並べ替えます:

.logo img {
  width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
    width: 120%;
  }
}
ログイン後にコピー
ログイン後にコピー

2.セレクターの詳細度を高める

セレクターを追加してメディア クエリ ルールの詳細度を高めます:

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo a img {
    width: 120%;
  }
}
ログイン後にコピー

Avoid ! important

Doメディア クエリの優先順位をオーバーライドするために「! important」宣言を使用しないでください。これにより、「! important」の過剰な使用につながり、CSS の特異性の管理が困難になります。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート