優先順位の問題は、実際には競合解決の問題であり、CSS セレクターによって同じ要素 (またはコンテンツ) が選択された場合、優先順位に従って異なる CSS ルールを選択する必要があります。実際には、多くの問題が関係します。
1 つ目は CSS ルールの詳細度です。CSS2.1 には一連の詳細度の計算方法があり、これは 4 桁の数字列 (CSS2 は 3 桁) で表されます。特別なルールを優先して判断する場合に有利になります。特異度の具体的な計算については、さまざまな状況における数値加算の一般的なルールとして、
ID セレクター (#someid) ごとに 0,1,0,0 を加算するというルールがあります。
各クラス セレクター (.someclass)、各属性セレクター ([attr=""] などの形式)、各疑似クラス (hover などの形式) は、各要素に
0、0、1、0 を追加します
。疑似要素 (:firstchild) などは 0,0,0,1 を追加します
。他のセレクターには、グローバル セレクター * が含まれ、0,0,0,0 が追加されます。追加しないことに相当しますが、これも一種の特殊性であり、後述します。
これらのルールに従って、最終的に計算された特異性を取得するために数値列が少しずつ追加され、比較および選択するときに左から右の順序でビットごとに比較されます。
いくつか例を挙げてみましょう:
h1 {色: 赤;}
/* 通常の要素ボーナスは 1 つだけあり、結果は 0,0,0,1 になります */
ボディ h1 {色: 緑;}
/* 2 つの通常の要素を追加すると、結果は 0,0,0,2 になります */
--後者が勝ちます
h2.grape {color: purple;}
/* 通常の要素とクラス セレクターが追加され、結果は 0,0,1,1 となります*/
h2 {カラー: シルバー;}
/*通常の要素、結果は 0,0,0,1 */
--前者が勝ちます
html > body table tr[id="totals"] td ul > li {color: maroon;}
/* 7 つの通常の要素、1 つの属性セレクター、その他の 2 つのセレクター、結果は 0,0,1,7 になります */
li#answer {カラー: ネイビー;}
/* ID セレクター、通常のセレクター、結果は 0,1,0,1 です */
--後者の勝ち
特異性に加えて、
ルール テキスト内には優先度 1,0,0,0 を持つ他のスタイル スタイルがいくつかあるため、それらは常に外部定義よりも高くなります。ここで、テキスト内スタイルは <div style="color: red">blah</div> のようなスタイルを指しますが、外部定義は <link> または <style> タグで定義されたルールを指します。
何よりも!重要な宣言ルールがあります。
!重要な宣言が競合する場合、優先順位が比較されます。
優先順位が同じ場合は、ソース コード内に出現する順序で決定され、後のものが優先されます。
継承から派生したスタイルには特異性の計算がありません。これは、他のすべてのルール (グローバル セレクター * によって定義されるルールなど) よりも低くなります。
@import 経由で読み込まれる外部スタイルに関しては、@import は他のすべてのルール定義より前に出現する必要があるため (そうでない場合、ブラウザーはそれを無視する必要があります)、後者優先の原則に従って、一般に優先順位の競合が優先されます。
ここで言及する必要があるのは、IE は @import を間違った位置で認識する可能性があることですが、@import がどこにあっても、それが他のすべてのルール定義より前にあるとみなされるため、誤解が生じる可能性があります。
したがって、優先順位の問題は単純に見えますが、その背後には依然として非常に複雑なメカニズムがあり、より注意が必要です。