CSS カスケード規則_html/css_WEB-ITnose

CSS ルールの詳細度の計算

詳細度
セレクターの詳細度は、セレクター自体のコンポーネントによって決まります。一意性の値は 0,0,0,0 の 4 つの部分で表されます。

比較ルール
値は左から右にソートされるため、すべて 1、 0、0、0 は、後続に関係なく、0 で始まるすべての特別な値よりも大きくなります。たとえば、0,0,1,0 は値 0,0,0,13 よりも大きくなります。

ワイルドカードの特異度は 0,0,0,0 であり、特異度には影響しません。

ID セレクターと ID 属性の属性セレクターの特別な値は、それぞれ 0,1,0,0 と 0,0,1,0 です。 したがって、ID 属性の属性セレクターは相対的です。低い。

インライン宣言の具体性は 1,0,0,0 で最も高くなります。
CSS2.1 の新機能であるインライン スタイル宣言用に 1 ビットを予約します。これは、CSS2.1 が作成されたときの Web ブラウザーのパフォーマンスを反映するために行われます。 CSS2 では、インライン スタイル宣言の特殊性は 1,0,0 です (特殊性には 4 つではなく 3 つの値が含まれます)。これは ID セレクターと同じ専門分野であるため、ID セレクターはインライン スタイルを簡単にオーバーライドできます。

!import important
! important でマークされた宣言には特別な値はありませんが、重要でない宣言とは分けて考慮する必要があります。実際、すべての !重要な宣言はグループ化され、重要な宣言の専門性の競合は重要な宣言内で解決され、重要でない宣言と混合されることはありません。同様に、重要でないステートメントもすべてグループ化され、特異性を使用して対処されると考えられます。重要なステートメントが重要でないステートメントと競合する場合、常に重要なステートメントが優先されます。

継承
ほとんどの設定とモデル設定は継承できません。継承された値には特殊性がまったくなく、特殊性が 0 ですらない。そして、特異性 0 は、特異性がないよりも強力です。

* {color：gray}h1#page-title {color:black;}<h1 id="page-title">Meerkat <em>Central</em></h1><p>Welcome to the best place on the web for meerkat information</p>

em は h1 の色を引き継いでいますが、特殊性がないため、0,0,0,0 の特殊性を持つワイルドカードに負けます。色はグレーです。
この例は、ワイルドカード セレクターを無差別に使用した場合に起こり得る問題の 1 つを示しています。ワイルドカード セレクターは任意の要素に一致するため、継承を短絡する効果がある傾向があります。この問題は解決できますが、多くの場合、ワイルドカード セレクターの無差別な使用を避け、最初から問題を回避する方が賢明です。
継承システムには特別な特徴はまったくありません。これは非常に重要であり、軽視してはなりません。たとえば、スタイル シートを設定し、次のように記述して、「ツールバー」内のすべてのテキストが黒の背景に白になるようにします。コンテンツであれば、これは正常に動作します。ただし、この要素のテキストがハイパーリンクの場合は、ユーザー エージェントのハイパーリンク スタイルが優先されます。 Web ブラウザでは、これは、ブラウザのスタイルシートに次のルールが含まれている可能性があるため、色が青になる可能性が高いことを意味します:

    #toolbar {color : white;background:black;}

この問題を解決するには、次のように宣言する必要があります:

    a:link {color : blue;}

Cascading

指定された要素に一致するセレクターを含む、関連するルールをすべて検索します。 この要素に適用されるすべての宣言を表示の重みで並べ替えます。 ! important のマークが付いているルールの重みは高くなります。指定された要素に適用されるすべての宣言をソースごとに並べ替えます。ソースには、作成者、読者、ユーザー エージェントの 3 つがあります。通常、作成者のスタイルは読者のスタイルに優先します。 ! important フラグを持つ Reader スタイルは、 ! important フラグを持つ author スタイルを含む他のすべてのスタイルよりも強力です。作成者スタイルと読者スタイルはどちらも、ユーザー エージェントのデフォルト スタイルより強力です。 特定の要素に適用されるすべての宣言を詳細度に基づいて並べ替えます。より高い特異性を持つ要素が優先されます。 指定された要素に適用されるすべての宣言を出現順に並べ替えます。宣言がスタイル シートまたはドキュメント内で後から現れるほど、その重みは大きくなります。スタイル シートにインポートされたスタイル シートがある場合、一般に、インポートされたスタイル シート内の宣言が最初に表示され、インポートされたスタイル シート内のすべての宣言が最後に表示されると考えられます。
正式には、この順序により、一般的に推奨されるリンク スタイルの順序があります。通常、リンク スタイルは、リンク - 訪問 - ホバー - アクティブ (LVHA) の順序で宣言することをお勧めします。

CSS 以外のパフォーマンスのヒント