CSS スタイルの競合を解決するいくつかの方法 (要約)

1. セレクターを調整する

コンビネータを使用すると、セレクターの説明をより正確に記述できます (CSS セレクター - MDN を参照)。たとえば、次のコード スニペットでは、.cellphones 内の .apple にスタイルを追加する場合、.apple のみを使用すると、必然的に .fruit 内の .apple にも影響します。

<div class="携帯電話">
  <div class="apple"></div>
</div>
<div class="フルーツ">
  <div class="apple"></div>
</div>

より正確な説明は、子孫コンビネータまたは子コンビネータです。説明が正確であればあるほど、優先度が高くなります。優先度の高い説明は、優先度の低い説明よりも優先されます。

/* 子孫コンバイナ: すべての子孫ノード */
.携帯電話 .apple {
 境界線: 1px 黒一色;
}

/* より正確な子孫コンビネータ */
本文.携帯電話.apple {
  境界線: 1px 青
}

/* 子コンバイナ: 直接の子ノード */
.携帯電話 > .apple {
  境界線: 1px 実線の赤;
}

上記のスタイルをすべて .apple に順番に追加すると、境界線は最終的に青色で表示されます。

詳細な優先順位ルールについては、CSS Priorityを参照してください。

2.セレクタ名をもう一度書きます

本質的には前のケースの特殊なケースです。たとえば、.apple の場合は、次のスタイルを追加します。

.cellphones > .apple.apple {
  境界線: 1px 紫色;
}
.携帯電話 > .apple {
  境界線: 1px 実線の赤;
}

最終的に境界線は紫色になります。

3. CSSスタイルシートの順序を変更する

同じタイプセレクターによって指定されたスタイルの場合、CSS ファイル内の後続のスタイルが前のスタイルを上書きします。

たとえば、次のコードの div 要素の場合、ブラウザのレンダリング結果は赤になります。

<div class="redBorder" class="blackBorder"></div>

.blackBorder {
  境界線: 1px 黒一色;
}
.redBorder {
  境界線: 1px 実線の赤;
}

HTML ファイルでは .blackBorder が .redBorder の後に表示されますが、優先順位は CSS ファイル内の順序に基づいて決定されることに注意することが重要です。つまり、CSS ファイル内の後の .redBorder のみが使用されます。

4. 優先度を積極的に上げる（非推奨）

単純で大雑把な方法もありますが、これはお勧めできません。それは、使用したいスタイルの後にキーワード !important を追加して、スタイルの優先度を非常に高いレベルに上げるという方法です。例えば：

<div class="redBorder" class="greenBorder"></div>

.greenBorder {
  境界線: 1px 緑 !important;
}
.redBorder {
  境界線: 1px 実線の赤;
}

上記のコードでは、境界線が緑色で表示されます。

!important を使用するのは非常に悪い習慣であり、スタイルシートに固有のカスケード ルールに違反し、デバッグが非常に困難になります。

参考文献:
優先度 - MDN
CSS スタイルの競合を解決する方法 - Magic Time Machine

これで、CSS スタイルの競合を解決するいくつかの方法 (要約) に関するこの記事は終了です。関連する CSS スタイルの競合の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。