CSSセレクタの重みと優先規則
4962 ワード
ウェイト順序(Weight Order)
「important」>「インライン」>「ID」>「クラス」>「ラベル|擬似クラス|属性選択」>「擬似オブジェクト」>「継承」>「ワイルドカード」.
原文:http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php
CSSを使用してWeb要素のスタイルを定義する場合、一般要素に一般スタイルを適用し、より特殊な要素に上書きすることがよくあります.では、新しく定義した要素スタイルがターゲット要素の元のスタイルを上書きできることを保証するにはどうすればいいのでしょうか.
CSSでは、セレクタの特殊性に基づいて定義されたスタイルルールの順序が決定され、より特殊なセレクタを持つルールは一般的なセレクタを持つルールより優先され、2つのルールの特殊性が同じであれば、後に定義されたルールが優先されます.
では、セレクタの特殊性をどのように計算するのでしょうか.次の図では、特殊性の計算方法を説明します.
特殊性を4つのレベルに分け,各レベルはセレクタのクラスを表し,各レベルの値はその代表するセレクタの個数にこのレベルの重み値を乗じ,最後にすべてのレベルの値を加算してセレクタの特殊値を導いた.
4つのレベルの定義は次のとおりです.第1等:style=」などのインラインスタイルを表し、重み値は1000です. 第2等:IDセレクタを表し、例えば:#content、重み値は100である. 第3等:代表クラス、擬似クラス、属性セレクタなど.content、重み値は10です. 第4等:div pのようなタイプセレクタと擬似要素セレクタを表し、重み値は1である. 例えば、上記の図を例として、NAVが2等選択器である.ACTIVEは3等セレクタ、UL、LI、Aは4等セレクタである.セレクタ式全体の特殊性の値は1*100+1*10+3*1=113です
次の計算例を示します.
注意:汎用セレクタ(*)、サブセレクタ(>)、および隣接する同胞セレクタ(+)はこの4つのレベルにないので、それらの重み値は0です.
具体的な例を見てみましょう.以下のスタイルルールのセットがあれば、HTMLコードの2つのタイトルが何色なのか判断できますか.
6つのスタイル・ルールのそれぞれの特殊性の値を計算しましょう.最初の特殊性の値=2*100+2*1=202 第2の特殊性の値=2*100+1=201 第3の特殊性の値=1*100+1*10+3*1=113 第4の特殊性の値=1*100+1*10+2*1=112 第5の特殊性の値=1*100+1*10+1*1=111 第6の特殊性の値=1*100+2*10+3*1=123 わかりました.最初のスタイルルールは202の高得点で今回のスタイルセレクタ特殊性大会のチャンピオンを獲得しました.後ろのルールはもっと複雑に見えますが、特殊性は誰のセレクタ式をもっと長く書くのではなく、IDセレクタが王道です.
セレクタの特殊性を理解することは重要です.特にバグを修復する際には、どのルールが優先されているのか、その理由を理解する必要があります.
機能していないようなCSSルールに遭遇した場合は、特殊な衝突が発生した可能性があります.セレクタに親要素のIDを追加して、その特殊性を高めてください.これが問題を解決できる場合は、スタイルシートの他の場所にもっと特別なルールがある可能性があります.それはあなたのルールをカバーしています.この場合、コードをチェックし、特殊な競合を解決し、コードをできるだけ簡潔にする必要があります.
「important」>「インライン」>「ID」>「クラス」>「ラベル|擬似クラス|属性選択」>「擬似オブジェクト」>「継承」>「ワイルドカード」.
原文:http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php
CSSを使用してWeb要素のスタイルを定義する場合、一般要素に一般スタイルを適用し、より特殊な要素に上書きすることがよくあります.では、新しく定義した要素スタイルがターゲット要素の元のスタイルを上書きできることを保証するにはどうすればいいのでしょうか.
CSSでは、セレクタの特殊性に基づいて定義されたスタイルルールの順序が決定され、より特殊なセレクタを持つルールは一般的なセレクタを持つルールより優先され、2つのルールの特殊性が同じであれば、後に定義されたルールが優先されます.
では、セレクタの特殊性をどのように計算するのでしょうか.次の図では、特殊性の計算方法を説明します.
特殊性を4つのレベルに分け,各レベルはセレクタのクラスを表し,各レベルの値はその代表するセレクタの個数にこのレベルの重み値を乗じ,最後にすべてのレベルの値を加算してセレクタの特殊値を導いた.
4つのレベルの定義は次のとおりです.
次の計算例を示します.
注意:汎用セレクタ(*)、サブセレクタ(>)、および隣接する同胞セレクタ(+)はこの4つのレベルにないので、それらの重み値は0です.
具体的な例を見てみましょう.以下のスタイルルールのセットがあれば、HTMLコードの2つのタイトルが何色なのか判断できますか.
01 #content div#main-content h 2 { 02 color : red ; 03 } 04 05 #content #main-content>h 2 { 06 color : blue 07 } 08 body #content div[id= "main-content" ] h 2 { 09 color : green ; 10 } 11 12 #main-content div.paragraph h 2 { 13 color :orange; 14 } 15 #main-content [class= "paragraph" ] h 2 { 16 color :yellow; 17 } 18 div#main-content div.paragraph h 2 .first{ 19 color :pink; 20 }以下はHTMLコードです.01 < div id = "content" > 02 < div id = "main-content" > 03 < h2 >CSS </ h2 > 04 < p >CSS（Cascading Style Sheet， “ ” “ ”） ， Web 。</ p > 05 < div class = "paragraph" > 06 < h2 class = "first" > CSS </ h2 > 07 < p >1、 2、 3、 4、 CSS W3C .</ p > 08 </ div > 09 </ div > 10 </ div >判断できましたか?答えは:2つのタイトルはすべて赤いです!6つのスタイル・ルールのそれぞれの特殊性の値を計算しましょう.
セレクタの特殊性を理解することは重要です.特にバグを修復する際には、どのルールが優先されているのか、その理由を理解する必要があります.
機能していないようなCSSルールに遭遇した場合は、特殊な衝突が発生した可能性があります.セレクタに親要素のIDを追加して、その特殊性を高めてください.これが問題を解決できる場合は、スタイルシートの他の場所にもっと特別なルールがある可能性があります.それはあなたのルールをカバーしています.この場合、コードをチェックし、特殊な競合を解決し、コードをできるだけ簡潔にする必要があります.