CSS は競合するセレクターをどのように解決するか: 優先ガイド

CSS セレクターの優先順位: 競合の解決

CSS の領域では、同じ要素をターゲットとする複数のセレクターがあるのが一般的です。これが発生すると、どのセレクターが優先されるのかという疑問が生じます。ここで、セレクターの優先順位の概念が登場します。

優先順位のルール

CSS 仕様では、セレクターの優先順位を決定するための明確なルール セットが定義されています。

1. ! important ルールとインライン スタイルはすべて上書きします: ! important フラグで宣言されたルールとインライン スタイルが最も優先されます。
2. 特異性:セレクターがより具体的であればあるほど、その優先順位は高くなります。特異性は、セレクターで使用される ID、クラス、および要素名の数に基づいて計算されます。たとえば、#id は .classname よりも高い特異性を持ち、.classname は tagname よりも高い特異性を持ちます。
3. 宣言順序: 2 つのセレクターが同じ特異性を持つ場合、セレクターで最後に宣言されたものが優先されます。スタイルシートが優先されます。

例

次の例を考えてみましょう:

<code class="css">#my-id {
  color: red;
}

.my-class {
  color: blue; /* !important */
}</code>

このシナリオでは、セレクター ".my-class" " は、! important フラグにより​​最も高い優先度を持ちます。その結果、ID「my-id」を持つ要素の色は青に設定され、#my-id セレクターで宣言されたルールがオーバーライドされます。

以上がCSS は競合するセレクターをどのように解決するか: 優先ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。