css priority_html/css_WEB-ITnose

CSSの特異性特性は、CSS値の優先度を測る規格であるため、関連する決定規則と計算方法が定められています。 CSS2 は 3 桁です）、4 つのレベルに似ており、値は左から右にあり、左側のレベルが最大で、1 つのレベルは 1 つのレベルよりも大きく、桁間に 16 進法はなく、レベルを区別することはできません。超えた。複数のセレクターが同じ要素に適用される場合、最終的に最も高い Specificity 値を持つセレクターが優先されます。セレクターの詳細度の値リスト:

ルール:

1. インライン スタイルの優先度の詳細度の値は 1,0,0,0 で、外部定義よりも高くなります。

2.!重要な宣言の詳細度の値が最も高くなります。

3. 詳細度の値が同じ場合、CSS コード内での出現順序によって決定され、後者の CSS スタイルが優先されます。 top;

4. 継続して取得されるスタイルには、他のすべてのルール (グローバル セレクター * によって定義されるルールなど) よりも低い具体性の計算がありません。

アルゴリズム:

複数のセレクターが同時に出現する場合、セレクターによって取得された Specificity 値が少しずつ追加されます。{例: 0,0,0,5 + 0,0, 1, 0} の代わりに 0,0, 0,5 =0,0,0,10 を使用して最終的に計算された特異性を取得し、比較して選択するときに左から右に少しずつ比較します。

分析例:

1.div { font-size:12px;}

分析:

1 要素 {div}、特異性値は 0,0,0,1 です

2.body div p { color: green;}

分析:

3 要素 { body div p }、特異性値は 0,0,0,3 です

3.div .sjweb{ font-size:12px;}

分析:

1 要素 {div}、特異性値は 0,0,0,1

1 クラス セレクター {.sjweb}、特異性値は 0,0,1, 0

最終: 特異性値は 0,0,1 ,1

4.Div # sjweb { font-size:12px;}

分析:

1 要素 { div }、特異性の値は 0,0,0,1 です

1 クラス セレクター {.sjweb} 、特異度の値は 0,1,0, 0 です

最後に、特異度の値は 0,1,0,1 です

5.html > body div [id=”totals” ] ul li > :red;}

分析:

6 要素 { html body div ul li p} 特異性値は 0,0,0,6 です

1 属性セレクター { [id= "totals"] } 特異性値は 0,0 ,1,0

他の 2 つのセレクター { > > } 特異性の値は 0,0,0,0 です

最後に: 特異性の値は 0,0,1 ,6

! important が最も優先されます。 ! important を使用して優先度を最高に変更し、次にスタイル オブジェクト、次に id > クラス > タグの順に、同じレベルのスタイルの後に表示されるスタイルの優先度を高くします。