CSS の優先順位を解釈します

CSS の優先順位について話す前に、CSS とは何か、またその用途を理解する必要があります。

まずはCSSについて簡単に説明します。CSSとはCascading Style Sheetsの略称です。その仕様は、インターネットの歴史の中で独特の発展段階を表しています。今やWebページ制作に携わる友人の中にはCSSを知らない人はいないはずです。Webページを作成する過程でCSSを使うことが多くなります。

2 つ目: CSS を使用してドキュメントの外観をリッチで変更しやすいように設定できるため、Web ページ制作者の作業負担が軽減され、制作およびポストメンテナンスのコストが削減されます。

実際、CSS とは何か、その機能について話すのは全くの蛇足ですが、Web ページ制作に携わっている友人なら多かれ少なかれ CSS に触れたことがあると思います。

早速ですが、今日の話題に入りましょう。

1. CSS の優先順位とは何ですか?

いわゆる CSS 優先度は、CSS スタイルがブラウザーで解析される順序を指します。

2.CSSの優先順位ルール

スタイルには優先順位があるため、この優先順位について合意するためのルールが存在します。この「ルール」がこの記事の焦点です。

スタイル シートの特異性は、さまざまなルールの相対的な重みを記述します。その基本的なルールは次のとおりです。

1. セレクター内の ID 属性の数をカウントします。
2. セレクター内の CLASS 属性の数を数えます。
3. セレクター内の HTML タグ名の数をカウントします。

最後に、スペースやカンマを追加せずに 3 つの数字を正しい順序で書き込み、3 桁の数字を取得します (css2.1 では 4 桁を使用します)。 (数値を 3 桁で終わるより大きな数値に変換する必要があることに注意してください)。セレクターに対応する数値の最終リストにより、大きい数値のどの機能が低い数値の機能をオーバーライドするかを簡単に判断できます。

例えば：

1. 各 ID セレクター (#someid) に、0、1、0、0 を追加します。
2. 各クラス セレクター (.someclass)、各属性セレクター ([attr=value] などの形式)、および各疑似クラス (hover などの形式) に 0,0,1,0 を追加します。
3. 各要素または疑似要素 (:firstchild) などに、0,0,0,1 を加算します。
4. 他のセレクターには、グローバル セレクター * と 0,0,0,0 が含まれます。追加しないことに相当しますが、これも一種の特殊性であり、後述します。

3. 機能分類のセレクター リスト

以下は、属性ごとにソートされたセレクターのリストです。

上の表だけから判断すると、理解するのが難しいように思えます。次の表があります。

以上より、HTMLタグの重みは1、CLASSの重みは10、IDの重みは100、継承の重みは0であることが容易にわかります(後述)。

これらのルールに従って数値の文字列を少しずつ加算して最終的な重みを取得し、比較して選択するときに左から右に少しずつ比較します。

優先順位の問題は実際には競合解決の問題であり、CSS セレクターによって同じ要素 (コンテンツ) が選択された場合、優先順位に応じて異なる CSS ルールを選択する必要があります。実際には多くの問題が関係します。

そうは言っても、CSS の継承について話さなければなりません。