CSSスタイルのカスケーディングルールの詳細な説明

CSS スタイル ルール構文スタイルは、CSS の基本単位です。各スタイル ルールは、セレクターと宣言ブロックという 2 つの基本部分で構成されます。

セレクターは、スタイルが適用される要素を決定します。

宣言ブロックは対応するスタイルを定義します。宣言ブロックは中括弧のペアで囲まれ、1 つ以上の宣言で構成されます。各宣言はコロンで区切られたプロパティと値で構成されます。

文法：

属性名 1: 属性値 1;
属性名 2: 属性値 2;
属性名 3: 属性値 3;

1. 各要素と属性に適用されているすべての宣言を見つける

ブラウザは各ページを読み込みます。各CSSルールはそれに応じて検出され、影響を受けるすべてのHTML要素が示されます。

2. 順序と重量で並べ替える

ブラウザは 5 つのオリジンを順番にチェックし、一致するプロパティを設定します。一致する属性が次のソースでも定義されている場合は、属性の値を更新します。

5 つのソース: 1. ブラウザのデフォルトのスタイルシート 2. ブラウザのフォント サイズを設定してデフォルトのスタイルを変更する 3. リンクで参照される CSS ファイル 4. スタイルで記述されたスタイル コード 5. インライン スタイル

重量を申告してください。次のように！ important は、発言の重みを高めるために使用されます。この方法では、他のソースを考慮する必要はありません。

p {color:green !important; font-size:12pt;}

順序によって重さが決まります。 2 つのルールが要素の同じプロパティに影響し、それらが同等に具体的である場合、最も下流にある (または後で宣言された) ルールが優先されます。

3. 詳細度で並べ替え: 詳細度はルールの明確さを示します。

p {font-size:12px;} p.largetext {font-size:16px;}

2 番目のルールにはタグ名とクラス名の両方が含まれているため、より具体的です。2 番目のルールは最初のルールをオーバーライドします。

特異度の計算: ICE 式

1. セレクターに ID がある場合は、I の位置に 1 を追加します。

2. セレクターにクラスがある場合は、C の位置に 1 を追加します。

3. セレクター内に要素（タグ）名がある場合は、E の位置に 1 を追加します。

4. 3桁の数字を取得します。

さて、具体的な程度を説明するために、いくつかの例を挙げてみましょう。

P 0-0-1 特異度 = 1

p.largetext 0-1-1 特異度=11

p#largetext 1-0-1 特異度=101

本文 p#largetext 1-0-2 特異度=102

本文 p#largetext ul.mylist 1-1-3 特異性=113 本文 p#largetext ul.mylist li 1-1-4

特異度 = 114

ここでは、各セレクターは前のセレクターよりも具体的です。

4. CSS セレクターとは何ですか?どのプロパティが継承されますか?

1.idセレクター（#myid）

2. クラスセレクター (.myclassname)

3. タグセレクター（div、h1、p）

4. 隣接セレクター（h1 + p）

5. 子セレクター (ul > li)

6. 子孫セレクター（li a）

7. ワイルドカードセレクター（*）

8. 属性セレクター (a[rel = "external"])

9. 疑似クラスセレクター（a:hover、li:nth-child）

* 継承可能なスタイル: font-size font-family color、UL LI DL DD DT;

* 継承不可能なスタイル: 境界線、パディング、マージン、幅、高さ。

CSS スタイルのカスケーディング ルールの詳細な説明はこれで終わりです。CSS スタイルのカスケーディングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。