CSS カスケード メカニズムの使用の詳細な説明

今回は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 サイトの他の関連記事に注目してください。

推奨読書:

Webpack スタイルの読み込みの詳細な分析

フロントエンドの実践的なプロジェクトにおける CSS コードの使用上の 20 の注意事項

以上がCSS カスケード メカニズムの使用の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。