CSS の 3 つの主要なメカニズム (機能): 特異性、継承、およびカスケード_html/css_WEB-ITnose

Inheritance (継承) は、ある要素からその子孫の要素に属性値を渡すために使用されるメカニズムです。要素にどの値を適用するかを決定するとき、ユーザー エージェント (ブラウザー) は、継承だけでなく、宣言の特異性、および宣言自体の起源も考慮する必要があります。このプロセスはカスケードと呼ばれます。ここでは、CSS のこれら 3 つのメカニズムの原理と関係について説明します。 1. 特殊事項 各ルールのペアが同じ要素に一致すると仮定して、次の 2 つのルールのペアを考えます:

h1 {color: red; }body h1 { color:green;}

h2.grape {color: purple;}h2 {color: siver;}

一致する色は 1 つだけであるため、ルールの各ペアのうち 1 つだけが勝ちます。では、どのルールがより強いかをどうやって知ることができるでしょうか?答えは各セレクターの特異性にあります。

1.特異性の値:

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

セレクターの具体的な特性は次のように決定されます:

インライン スタイルの場合: 1、0、0、0。

セレクター内のID属性値には、0、1、0、0を追加します。

セレクター内のクラス属性値、属性選択、または疑似クラスの場合は、0、0、1、0 を追加します。

セレクター内の要素および擬似要素には、0、0、0、1を加算します。

ワイルドカード セレクター (*)、0、0、0、0 を追加します。

特殊属性の計算値:

h1 {color: red;}/*specificity=0,0,0,1*/p em {color:purple;}/*specificity=0,0,0,2*/.grade{color:purple;}/*specificity=0,0,1,0*/*.bright{color:yellow;}/*specificity=0,0,1,0*/div#header [href]{color:black;}/*specificity=0,1,1,1 包涵一个属性选择器*/

2. 重要性

!重要

時には、いくつかの発言が他のすべての人生を超えて非常に重要になることがあります。このとき、ステートメントの終了セミコロンの前に ! important を挿入してマークすることができます。

すごい

2. CSS の継承

1、

上の図には 2 つのリストが含まれており、1 つは順序付けされておらず、もう 1 つは順序付けされています。 1つ。 raw color:gray; が body 要素に適用されると、要素はこの宣言を採用します。この値はツリーの下の子孫要素に伝播され、この値を継承する子孫要素がなくなるまで継続されます。 (要素は先祖に値を渡しませんが、例外があります。body要素に適用された背景スタイルはhtml要素に渡すことができます。)

2. 継承可能なプロパティ

継承できるプロパティCSS では次のように要約されます - — テキストと画像のサイズとスタイルに関連するすべての属性を継承できます (例: 文字間隔、単語間隔、空白、行の高さ、色、フォントなど)

3. 継承された属性の特殊性

継承された値は特殊性ではなく、特殊性が0でもありません。

3. カスケード

等しい特性を持つ 2 つのルールが同時に同じ要素に適用された場合、ブラウザはこの競合をどのように解決しますか?たとえば、

rrree

これら 2 つのルールの特殊性は 0, 0, 0, 1 であるため、それらの重みは等しいです。ただし、要素が赤と青の両方になることは不可能です。この場合、

カスケード

ルールを適用する必要があります。

1. 指定された要素に一致するセレクターを含む関連ルールをすべて検索します。 2. この要素に適用されたすべての宣言を表示の重みで並べ替えます。 (!重要) フラグのあるルールは、(!重要) フラグがないルールよりも重みが高くなります。要素に適用されるすべての属性をソース、作成者 > リーダー > ユーザー エージェントごとに並べ替えます。

重みの大きい順に次のとおりです。

読者からの重要な声明。

b. クリエイティブスタッフからの重要なお知らせ。

c. クリエイティブスタッフからの通常の発言。

d、読者からの通常の発言。

e、ユーザーエージェント宣言。

3. 特定の要素に適用されたすべての宣言を詳細度で並べ替えます。特異性が高い要素は、特異性が低い要素よりも大きな重みを持ちます。

4. 指定された要素に適用されたすべての宣言を出現順に並べ替えます。宣言がスタイル シートまたはドキュメント内で後から現れるほど、その重みは大きくなります。スタイルシート内にインポートされたスタイルシートがある場合、一般的にはインポートされたスタイルシート内の宣言が最初に来て、メインスタイルシート内の宣言が最後に来ると考えられます。

IV. 概要

カスケード スタイル シートの最も基本的な側面はカスケードです。このカスケード プロセスを通じて、矛盾する宣言が並べ替えられます。

読者向けの重要な声明 (! 重要) > 作成者向けの重要な声明 (! 重要) > インライン スタイル (1, 0, 0, 0) > ID セレクター (0, 1, 0,0) )>クラス セレクター、属性セレクター、疑似クラス セレクター (0,0,1,0)>要素セレクター (0,0,0,1)>

ワイルドカード セレクター (0, 0, 0, 0) > 継承されたプロパティ > ブラウザーのデフォルト スタイル。

特殊なケース: 3499910bf9dac5ae3c52d5ede7383485 要素の color および text-decoration 属性、および title 要素の font-size 属性は、ブラウザのデフォルトのスタイルの優先順位を継承します。