CSSカスケーディングメカニズムについての簡単な説明

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

CSS では、同じ要素の特定のプロパティに同時に影響を与えるスタイルが複数存在する可能性があるため、カスケード メカニズムによって、作成者 (コードを作成する人)、ユーザー (ページを閲覧する人)、およびユーザー エージェント (通常はブラウザー) 間のスタイルの競合を解決できます。

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

（１）ユーザーエージェントスタイル

（２）ユーザー一般スタイル

（３）著者の一般的なスタイル

（4）著者の重要なスタイル（!important）

（５）ユーザーの重要なスタイル（!important）

（6）2つのスタイルが同じコード（たとえば、両方とも作成者（コード）から来ている）から来ていて、それらのスタイル宣言が同等に重要である場合、それらは詳細度に基づいて計算され、詳細度の高いスタイルが低いスタイルを上書きします。

（７）具体性が同じであれば、スタイルが新しいほど優先順位が高くなります。

ユーザーが設定した重要なスタイルが、作成者が設定した重要なスタイルよりも優先されるのはなぜでしょうか。その理由は、ページのフォント サイズの調整など、ユーザーが特別な要件を満たしやすくするためです。

セレクタの特異性の計算

（１）要素のstyle属性に宣言が現れた場合、aは1としてカウントされる。

（２）ｂはセレクタ内の全てのIDセレクタの数の合計に等しい

（３）cはセレクタ内のすべてのクラスセレクタ、属性セレクタ、疑似クラスセレクタの合計に等しい。

（４）ｄはセレクタ内のすべてのタグセレクタと疑似要素セレクタの合計に等しい。

abcd はセレクターの詳細度です。比較順序は a から始まり、大きい方が優先されます。

知らせ：

1. 継承は優先度が最も低く、詳細度も低い
2. 結合子（+、>など）とユニバーサルセレクタ（*）の特異性は0です。

.box{} /*特異度=0,0,1,0*/
.box div{} /*特異度=0,0,1,1*/
#nav li{} /*特異度=0, 1, 0, 1*/
p:first-line{} /*特異度=0,0,0,2*/
style="" /*詳細度=1,0,0,0*/

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。