CSS ルールがカスケードする場合の優先アルゴリズム

css ルールの優先順位は、web フロントエンド開発者が理解する必要がある概念です。スタイルを追加するには、一般的に 4 つの方法が使用されます。

1. インライン スタイル
2. 埋め込みスタイル
3. 外部スタイル
4. ユーザー スタイル

インライン スタイルは醜い、シャトルインしますhtml ドキュメントは html 要素と絡み合っており、web フロントエンド開発者にとっては多大な問題を引き起こします。多くの場合、次のように表示されます:

<p style="color:red;">this is a paragraph.</p>

埋め込みスタイルは、インライン スタイルよりも紳士的です。これらは html ドキュメントにも存在しますが、html 要素と絡み合うことを嫌います。これらは、

<style type="text/css" media="screen"> 
    p{ 
        color : red; 
    } 
</style>

外部スタイルは貴族です。html に留まりたくないので、単に外部ファイルの形式で独立して存在します。通常、html にインポートするには 要素または @import ステートメントを使用します。

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

できるだけ外部スタイルを使用する必要があります。理由はたくさんあると思います。誰もが知っているので、繰り返しません。

上記の 3 つとは少し異なるユーザー スタイルもあります。ie ブラウザを使用している場合は、[ツール] – [インターネット オプション] – [全般] – [外観] – [アクセシビリティ] – [ユーザー スタイル] でユーザー スタイルを見つけて追加できます。シートの場所 (中国語版の ie ブラウザを持っていないことをお詫びします)。

スタイルを追加する方法はたくさんあるため、スタイルのカスケードを避けるのは困難です。例:

<p class="intro" style="color:red;">this is a paragraph.</p>

上記のインライン スタイルを使用しながら、外部スタイルでも使用します:

p{ 
    color : yellow; 
}

要素もまだあります

p.intro{ 
    color : blue; 
}

このようにして、同じ要素の同じ属性色の値を指定する複数の css ルールが存在します。この状況はカスケードと呼ばれます。カスケードが発生すると、css パーサーは優先アルゴリズムに基づいて最終的に選択された値を決定します。

優先順位アルゴリズムでは、次の 3 つの側面を順番に考慮します。
1. css ルールの重要性とソース
2. css ルールの特殊性
3. cssドキュメント内でルールが出現する順序

アルゴリズムのプロセスは 4 つのステップに分かれています: p >

1. 要素の特定の属性について、その属性の値を指定するすべての css ルールをリストします。 上記の例では、class="intro" の

要素に、color 属性を指定する 3 つの css ルールがあります。

2. 発言の重要性と出典に応じて優先順位を付ける

重要度には 2 つのタイプがあります:
重要と通常 (つまり、 、重要ではありません)

css ルールの後に ! important を追加する重要性は、追加しない場合よりも重要です。

ソースは 3 つあります:

ユーザー エージェント スタイルシート – ブラウザのデフォルト スタイル

作成者スタイルシート – 開発者定義のスタイル

ユーザー スタイルシート – ブラウザのユーザー定義スタイル

優先順位重要性とソースの順序は低いものから高いものまで:

ユーザー エージェント スタイルシート

ユーザー スタイル シートの通常のルール

作成者スタイル シートの通常のルール

オーサラー スタイル シートの重要なルール

ユーザー スタイル シートの重要なルール

上記の並べ替え後、優先度の高い css ルールがある場合、その他すべての競技ルールについては、アルゴリズムは終了し、最も高い優先順位で指定された値が返されます。最も高い優先度を持つ css ルールが複数ある場合、それらは引き続き競合し、アルゴリズムはステップ 3 に入ります。

3. 特異度による並べ替え

css は、複数のルールの各ルールで指定されたセレクターの特異度の値を計算します。この値が大きいほど、優先度が高くなります。

特殊性の値は、a、b、c、d の 4 つの整数で構成される配列のような値です。a の重みが最も高く、d の重みが最も低くなります。セレクター特異性の値の計算方法は次のとおりです。
ルールがインライン スタイルの場合、 a = 1
ルールがセレクターで指定されている場合、セレクターに表示される id セレクターの数は b の値になります
/>ルールがセレクタで指定されている場合、セレクタ内に出現する属性セレクタ（クラス セレクタを含む）または疑似クラス セレクタの数の合計が c の値になります。
ルールが指定されている場合by selector、セレクター内に出現する要素セレクター、または疑似要素セレクターの数の合計が d の値になります。

ユニバーサル セレクター * の特殊性の値は 0,0,0,0 です。

公式 web サイトでは、理解を深めるためにいくつかの例が示されています。

特異度の値に従って並べ替える場合、a の重みが最も高いため、最初に a が比較され、a が同じ場合は b が比較されます。したがって、b、c、d の値がどれほど大きくても、インライン スタイルが常に最も高い特異性を持ちます。

上記の特異性に従って並べ替えた後、他のすべての競合ルールよりも高い優先順位を持つ css ルールが存在する場合、アルゴリズムは終了し、最も高い優先順位で指定された値が返されます。最も高い優先度を持つ css ルールが複数ある場合、それらは引き続き競合し、アルゴリズムはステップ 4 に入ります。

4. ドキュメント内で css ルールが現れる順序を比較します。

後に現れるものは、常に前に現れるものよりも高い優先順位を持ちます。最後に表示されるステートメントは、プロパティの値として使用されます。