CSS の特異性: スタイルの背後にある重み

導入

CSS を、さまざまなスタイルが注目を集めるために競い合うファッション ショーとして想像してください。勝者は？最も「重さ」または特異性のあるスタイル。この投稿では、CSS の特異性の背後にある謎を解き明かし、CSS の仕組みとそれがなぜ重要なのかを説明します。

CSS の特異性を理解する

詳細度は、各 CSS セレクターに割り当てられる数値です。複数のスタイルが同じ要素に適用される場合に、どのスタイル ルールが優先されるかを決定します。最もスタイリッシュな服装が注目を集めるファッション コンテストと考えてください。

特異性の計算方法

特異性は 4 つの要素に基づいて計算されます:

1. インライン スタイル: style 属性を使用して要素に直接適用されるスタイル。これらは最も高い特異性 (1、0、0、0) を持ちます。
2. ID: #id 構文を使用するセレクター。各 ID は 100 ポイント (0、1、0、0) を付与します。
3. クラス、属性、疑似クラス: .class、[attribute]、または :pseudo-class を使用するセレクターは、それぞれ 10 ポイント (0、0、1、0) を与えます。
4. 要素と疑似要素: 要素 (p、div など) または疑似要素 (::before、::after) をターゲットとするセレクターは、それぞれ 1 ポイント (0、0、0、1) を提供します。

例:

• #my-id .my-class:hover の特異性は (0, 1, 1, 0) または 110 ポイントです。
• .my-class p の特異性は (0, 0, 1, 1) または 11 ポイントです。

最も高い特異性を持つルールが優先されます。

特異性の影響

• スタイルのオーバーライド: より具体的なセレクターは、あまり具体的でないセレクターをオーバーライドできます。たとえば、インライン スタイルは、スタイルシートで定義されたスタイルを常にオーバーライドします。
• 意図しない結果: 特異性が高いとスタイルのオーバーライドが困難になり、予期しない結果が生じる可能性があります。
• デバッグ: 特異性を理解すると、スタイルの競合を特定し、効率的に解決するのに役立ちます。

実際の例

次のスタイルのボタンがあるとします:

button {
  color: blue;
}

.primary-button {
  color: red;
}

#important-button {
  color: green;
}

ボタンのクラスがprimary-buttonとID important-buttonである場合、最も高い特異性を持つため、IDの緑色が適用されます。

結論

CSS の特異性は複雑なトピックになる可能性がありますが、CSS をマスターするにはそれを理解することが重要です。特異性の計算方法とそれがスタイルの適用に及ぼす影響を把握することで、適切に構造化された予測可能なスタイルを作成する準備が整います。

次の投稿では、具体性を管理し、CSS アーキテクチャを改善するための強力なツールである CSS レイヤーについて詳しく説明します。

以上がCSS の特異性: スタイルの背後にある重みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。