CSSにおけるカスケード機構の解析

この記事では、主に CSS カスケード メカニズムに関する関連情報を紹介します。カスケード メカニズムは、作成者 (コードを書く人)、ユーザー (ページを閲覧する人)、およびユーザー エージェント (通常はブラウザーを指します) の間のスタイルの競合を解決できます。皆様の参考になれば幸いです。

CSS にはなぜカスケード メカニズムがあるのですか

同じ要素の特定の属性に同時に影響を与える複数のスタイルが CSS に存在する可能性があるためです。カスケード メカニズムは作成者 (作成者) の問題を解決できます。コードを書く)、ユーザー (ブラウザー) ページのユーザー) とユーザー エージェント (通常はブラウザー) の間のスタイルの競合。

カスケード内の各スタイル ルールには重み値があります。複数のルールが同時に有効になる場合、最も大きな重みを持つルールが優先されます。一般に、作成者によって指定されたスタイルの重み値はユーザーのスタイルの重み値よりも大きく、ユーザー スタイルの重み値はクライアント (ユーザー エージェント) の重み値よりも高くなります。一般的な重量値や物体はあるかどうか！重要なのは、特異性は立場に関連しているということです。カスケード順序では、次の重み値は小さいものから大きいものになります

(1) ユーザー エージェント スタイル

(2) ユーザーの一般的なスタイル

(3) 作成者の一般的なスタイル

(4) 作成者の重要なスタイル (!重要)

( 5) ユーザーの重要なスタイル (!重要)

(6) 2 つのスタイルが同じコードから来ている場合 (両方とも作成者 (コード) など)、それらのスタイル宣言が同等に重要である場合、それらは計算されます。特異度に基づいて、特異度が高いと特異度の低いスタイルもカバーされます

(7) 特異度が同じ場合、後のスタイルの優先順位が高くなります

ユーザーが設定した重要なスタイルの優先順位が高い理由その理由は、ユーザーがページのフォント サイズの調整などの特別な要件を実装しやすくするためです。

セレクターの特異性の計算

(1) 宣言が要素の style 属性にある場合、a は 1 としてカウントされます

(2) b はすべてのセレクターに等しいID セレクターの数の合計

(3)c は、セレクター内のすべてのクラス セレクターと属性セレクターに等しく、擬似クラス セレクターの数の合計

(4)d は、セレクター内のすべてのラベル選択に等しくなります。セレクター セレクターと疑似要素セレクターの合計数

a-b-c-d はセレクターの特異性です。比較順序は最初から始まり、最初に大きい方が優先されます。

注:

1. Inherited は優先度が最も低く、具体性はありません

2. 結合文字 (+、> など) とユニバーサル セレクター (*) の具体性は 0 です

.box{} /*特异度=0，0，1，0*/
.box p{} /*特异度=0，0，1，1*/
#nav li{} /*特异度=0，1，0，1*/
p:first-line{} /*特异度=0，0，0，2*/
 /*特异度=1，0，0，0*/

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS のパーセンテージの問題の分析

以上がCSSにおけるカスケード機構の解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。