CSS_html/css_WEB-ITnose の特殊性、継承、カスケード

まえがき

最近『The Definitive Guide to CSS』を読んでいたのですが、その本の第3章「構造と階層化」にその具体性がとてもよく解説されていましたので、今日は自分の考えを整理して以下に記録しておきます。

問題の紹介

非常に単純なリスト構造なので、「first」という単語のフォントの色を設定したい場合は、次の 2 つの方法が考えられます:

そこで問題は、フォントは何色になるでしょうか？

CSS ルールの構造

各 CSS ルールの構造は上記の通りです、それぞれの名前を覚えておいてください。そうしないと、続けると不快になります。

特異性

特異性の概念と役割は本の中で詳しく説明されています:

ルールごとに、ユーザーエージェント（ブラウザ）はセレクターの特異性を計算し、この特異性をルール内の個々のステートメントに追加します。

要素に矛盾する属性が 2 つ以上ある場合、最も具体性の高い宣言が優先されます。

全体的には計算と比較の2つの部分に分かれています。初見では絶対にわからないので、まずは使ってみて、何もなくなってから戻って見てみると、急にわかるようになります。

特殊性の計算ルール

特殊性の紹介でも触れましたが、特殊性をどのように計算するかは非常に重要で、本に記載されている計算ルールは以下の通りです:

1. インラインスタイル: 1,0 ,0, 0

2. IDセレクター: 0,1,0,0

3. クラスセレクター、属性セレクター、擬似クラスセレクター: 0,0,1,0

4. 要素セレクター、擬似要素セレクター: 0、 0,0,1

5. ワイルドカードセレクター: 0,0,0,0

6. 結合器、継承: 専門性なし

7. !重要: 有無によりキーワードが2つに分かれるグループ、それぞれが個別に計算されます

注: 4 つの数値グループの間には関係がなく、桁上がりもありません。

上記のルールは、考えられるすべての CSS セレクターをカバーしており、関連するセレクターの特異性は、これらに基づいて計算され、宣言ブロック内の各宣言に特異性が割り当てられます。

関連する例は無数にあるので数えません。

特殊性の比較ルール: カスケード

特殊性の導入を振り返ると、特殊性の計算は比較のために行われ、その後、表示のための勝利スタイルを決定することがわかります。 、宣言状況に矛盾があることが前提となります。ルールは次のとおりです:

1. まず重みに従って比較します:

読者にとって重要なスタイル > クリエイターにとって通常のスタイル > ブラウザのデフォルト スタイル

2.上記の条件は比較できません。特異度に従って比較します:

特異度は、1,0,0,1 と 0,2,0,0 など、数値の各グループを左から右に比較し、次に従って表示されます。以前の定義スタイル。

3. 上記の条件を比較できない場合は、出現順に比較します:

後に出現するものが最初に出現するものを上書きします。

上記のルールに従うと、質問への答えが得られます: 色は次のようになります:

まとめ

初めてブログを整理して、とても勉強になりました。いつもは本をざっと読むだけですが、今回は本当に勉強になりました。