ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose の特殊性、継承、カスケード
最近『The Definitive Guide to CSS』を読んでいたのですが、その本の第3章「構造と階層化」にその具体性がとてもよく解説されていましたので、今日は自分の考えを整理して以下に記録しておきます。
非常に単純なリスト構造なので、「first」という単語のフォントの色を設定したい場合は、次の 2 つの方法が考えられます:
そこで問題は、フォントは何色になるでしょうか?
各 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. 上記の条件を比較できない場合は、出現順に比較します:
後に出現するものが最初に出現するものを上書きします。
上記のルールに従うと、質問への答えが得られます: 色は次のようになります:
初めてブログを整理して、とても勉強になりました。いつもは本をざっと読むだけですが、今回は本当に勉強になりました。