CSS の特異性の説明: どのスタイルが優先されるかを制御する方法

なぜその頑固なスタイルが適用されないのか疑問に思いながら、CSS の調整に何時間も費やしたことがありますか? 特異性の世界へようこそ。

特異性とは、複数のルールが同じ要素を対象とする場合に、ブラウザがどの CSS ルールを適用するかを決定する方法です。それを理解しないと、スタイルシートはすぐに混乱した状態になってしまう可能性があります。分解してみましょう。

特異性の階層

1. ユニバーサル セレクター: ゼロポイント コンテンダー

ユニバーサル セレクター (*) は、0 ポイント を持つ特異性チェーンの一番下にあります。これはすべてに対する包括的なルールのようなものですが、他のほとんどすべてのものによって上書きされます。

例:

* { color: red; }、

要素セレクターが勝つため、青色になります。

2. 要素セレクター: 1 つの特異性ポイント

要素セレクター (h1、p、div) はユニバーサル セレクターよりも強力で、1 ポイントを持ちます。

例:

このルールは、同じ要素をターゲットとするユニバーサル セレクターをオーバーライドします。

3. クラス、疑似クラス、または属性セレクター: 10 ポイント

.button、:hover、[type="text"] などのセレクターはより具体的で、10 ポイントあります。

例:

これは、ユニバーサル セレクターと要素セレクターの両方をオーバーライドします。

4. IDセレクター：100ポイント

ID (#submitButton) は 100 ポイントで大幅に強力です。スタイルの管理が難しくなる可能性があるため、使用は慎重に行ってください。

例:

5. インライン スタイル: 1,000 ポイント – ヘビー級

インライン スタイルは、! important を除くすべてに優先します。

例:

特異性が関係する場合、順序が重要になる

2 つのルールが同じ詳細性を持っている場合、スタイルシートで後にある方が優先されます。

例:

ここで、

2 番目のルールが後であるため、緑色になります。

特異性ポイントの要約

• ユニバーサルセレクター(*): 0ポイント
• 要素セレクター (div, p): 1 ポイント
• クラス、疑似クラス、属性セレクター: 10 ポイント
• IDセレクター(#id): 100ポイント
• インライン スタイル: 1,000 ポイント
• !重要: すべてを上書きします

特異性をマスターすると、クリーンで保守しやすい CSS を作成できるようになり、際限のないデバッグから解放されます。次回スタイルがうまく動作しないときは、どこを見ればよいか正確にわかります。

以上がCSS の特異性の説明: どのスタイルが優先されるかを制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。