CSSスタイルの競合が発生した場合の対処方法

解決策: 1. セレクターを改良し、セレクターの説明をより正確に記述します。 2. セレクター名を再度記述します。 3. CSS スタイル シート内の順序を変更します。 4. 優先順位を積極的に改善します。使用するスタイルの後にキーワード「! important」を追加します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

1. セレクターを改良する

コンバイナーを使用して、セレクターの説明をより正確に記述します。次のコード スニペットのように、.cellphones の .apple にスタイルを追加し、.apple のみを使用する場合、必然的に .fruit の .apple に影響します。

<div class="cellphones">
  <div class="apple"></div>
</div>
<div class="fruit">
  <div class="apple"></div>
</div>

Descendant Combinator または Child Combinator のより正確な説明を使用できます。説明が正確であればあるほど、優先順位は高くなります。優先順位の高い説明は、優先順位の低い説明をオーバーライドします。

/* 后代组合器：所有后代节点 */
.cellphones .apple {
	border: 1px solid black;
}

/* 更加精确的后代组合器 */
body .cellphones .apple {
  border: 1px solid blue;
}

/* 子代组合器：直接子节点 */
.cellphones > .apple {
  border: 1px solid red;
}

上記のスタイルをすべて .apple に順番に追加すると、最終的に境界線が青色になります。

詳細な優先度ルールについては、「CSS 優先度」を参照してください。

2. セレクター名を再度記述します。

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

.cellphones > .apple.apple {
  border: 1px solid purple;
}
.cellphones > .apple {
  border: 1px solid red;
}

最終的に、境界線は紫色で表示されます。

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

同じタイプのセレクターで指定されたスタイルの場合、CSS ファイル内の後のスタイルが前のスタイルを上書きします。 。 スタイル。たとえば、次のコードの div 要素の場合、ブラウザのレンダリング結果は赤になります。

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

.blackBorder {
  border: 1px solid black;
}
.redBorder {
  border: 1px solid red;
}

HTML ファイルでは .redBorder の後に .blackBorder が表示されますが、優先度の判断はその内容に基づいて行われることに注意してください。 CSS ファイル内の順序。つまり、CSS ファイルの後半にある .redBorder のみが使用されます。

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

シンプルで粗雑な方法もありますが、非推奨です。これは、スタイルの後にキーを追加することです。 ! important という単語を使用すると、スタイルの優先順位を非常に高いレベルに上げることができます。例:

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

.greenBorder {
  border: 1px solid green !important;
}
.redBorder {
  border: 1px solid red;
}

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

! important の使用は非常に悪い習慣です。スタイル シートに固有のカスケード ルールが破壊され、デバッグが非常に困難になります。

推奨学習: css ビデオ チュートリアル

以上がCSSスタイルの競合が発生した場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。