☰

CSSセレクタの優先度/詳細度を理解する 質問する

tag-icon • tag-icon html css css-selectors
CSSセレクタの優先度/詳細度を理解する 質問する

CSS セレクターがプロパティの衝突に対してどのように動作するかを理解したいと思います。あるプロパティが別のプロパティよりも選択されるのはなぜですか?

div {
  background-color: red;
}

div.my_class {
  background-color: black;
}

div#my_id {
  background-color: blue;
}

body div {
  background-color: green;
}

body>div {
  background-color: orange;
}

body>div#my_id {
  background-color: pink;
}
<div id="my_id" class="my_class">hello</div>

セレクターの優先順位はどのように機能しますか?

ベストアンサー1

CSS 2.1仕様へのリンクとブラウザの仕組みを載せておきます。想定特異度を計算するには:

CSS 2.1 セクション 6.4.3:

セレクターの詳細度は次のように計算されます。

  • 宣言がセレクター付きのルールではなく 'style' 属性からのものである場合は 1 をカウントし、それ以外の場合は 0 (= a) をカウントします (HTML では、要素の "style" 属性の値はスタイル シート ルールです。これらのルールにはセレクターがないため、a=1、b=0、c=0、d=0 です)。
  • セレクタ内のID属性の数を数える（= b）
  • セレクタ内の他の属性と疑似クラスの数を数える（= c）
  • セレクタ内の要素名と疑似要素の数を数える（= d）
  • 詳細度はセレクタの形式のみに基づきます。特に、ソース ドキュメントの DTD で id 属性が「ID」として定義されている場合でも、"[id=p33]" 形式のセレクタは属性セレクタ (a=0、b=0、c=1、d=0) としてカウントされます。

4 つの数字 abcd を連結すると (大きな基数を持つ数体系で)、特定性が生まれます。

特異性が等しい場合、CSS 2.1 セクション 6.4.1登場するのは:

  1. 最後に、指定された順序で並べ替えます。2 つの宣言の重み、起源、および詳細度が同じである場合、後者の指定が優先されます。インポートされたスタイル シート内の宣言は、スタイル シート自体内の宣言よりも前にあると見なされます。

これはスタイルがいつ定義されるかということであり、いつ使用されるかということではないことに注意してください。クラス.aとの.b詳細度が同じ場合、最後に定義された方がスタイルシート内が勝ちます。<p class="a b">...</p>と は、と<p class="b a">...</p>の定義順序に基づいて、同じようにスタイル設定されます。.a.b

おすすめ記事