[閲覧注意] CSS 決定版ガイド 2: 構造と Cascading_html/css_WEB-ITnose

おそらく、カスケード スタイル シートの最も基本的な側面の 1 つはカスケードです。これは、矛盾する宣言が並べ替えられ、最終的なドキュメント表現が決定されるカスケード プロセスです。このプロセスの中心となるのは、セレクターとそれに関連する宣言の特殊性、および継承メカニズムです。

具体性

ルールごとに、ユーザー エージェントはセレクターの特異性を計算し、この特異性をルール内の個々の宣言に追加します。要素に 2 つ以上の競合する属性宣言がある場合、最も高い特異性を持つ宣言が優先されます。

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

セレクターで指定された各 ID 属性値に対して、0、1、0、0 を追加します。

セレクター、属性選択、または疑似クラスで指定された各クラス属性値に、0、0、1、0を追加します。

セレクターで指定された各要素と疑似要素に 0、0、0、1 を加算します。

インラインスタイル、1、0、0、0を追加します。

コンビネータとワイルドカード セレクタは特別性には何も寄与しません

h1{color:red;}/* specifity = 0,0,0,1 */p em{color:purple;}/* specifity = 0,0,0,2 */.grape{color:purple;}/* specifity = 0,0,1,0 */*.bright{color:yellow;}/* specifity = 0,0,1,0 */p.bright em.dark{color:maroon;}/* specifity = 0,0,2,2 */#id216{color:blue;}/* specifity = 0,1,0,0 */div#sidebar *[href]{color:silver;}/* specifity = 0,1,1,1 */h1+p{color:black;font-style:italic;}/* specifity = 0,0,0,2 */<h1 style="color:green;">Green</h1> /* specifity = 1,0,0,0*/

Importance

CSS では、これらの宣言の終了セミコロンの前に ! important を挿入できます。

p.dark {color:#333 !important; background: white;}

! important とマークされた宣言には特別な特異性の値はありませんが、重要でない宣言とは別に考慮されます。実際には、すべての ! important 宣言はグループ化され、重要な宣言の特殊性の競合は重要な宣言内で解決され、重要でない宣言と混合されません。重要なステートメントが重要でないステートメントと競合する場合、常に重要なステートメントが優先されます。

継承

スタイルは、指定された要素だけでなく、その子孫要素にも適用されます。

/*将声明color :gray;应用到ul元素时，这个元素会采用该声明。这个值再沿着树向下传播到后代元素，并一直继续，直到再没有更多的后代元素继承这个值为止。值绝对不会向上传播，也就是说，元素不会把值向上传递到其祖先。*//*注意：在HTML中，对于向上传播规则有一个例外：应用到body元素的背景样式可以传递到html元素（html是文档的根元素），相应地可以定义其画布。*/ul {    color: red;}

一般に、ほとんどのボックス モデル プロパティ (マージン、パディング、背景、境界線を含む) は継承されません。

継承された値には特別性がまったくなく、特別性が 0 ですらない。

ID ツールバーを持つ要素にプレーン テキストのみが含まれ、他のコンテンツが含まれていない限り、これは正常に機能します。ただし、この要素内のテキストがハイパーリンク (要素) の場合は、ユーザー エージェントのハイパーリンク スタイルが優先されます。 Web ブラウザでは、ブラウザのスタイルシートに次のルールが含まれている可能性があるため、これは色が青になる可能性が高いことを意味します:

a:link {color: blue;}

この問題を解決するには、次のステートメントを実行する必要があります。 :

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

#toolbar a:link {color:white;} デフォルトのルールは、ツールバーの a 要素にルールを直接指定することでオーバーライドできます。

ワイルドカード セレクターの特異性は 0 であるため、ワイルドカード セレクターが適用されると継承された値が上書きされるため、ワイルドカード セレクターは継承を短絡する効果があることがよくあります。これは、ワイルドカード セレクターを無差別に使用すると、奇妙な問題が発生する可能性があることを示しています。

Cascading

この要素に適用されるすべての宣言を明示的な重みに従って順序付けします。 ! important フラグのあるルールは、 ! important フラグのないルールよりも重みが高くなります。

指定された要素に適用されるすべての宣言をソースごとに並べ替えます。ソースには、作成者、読者、ユーザー エージェントの 3 つがあります。通常、作成者のスタイルは読者のスタイルに優先します。 ! important フラグが付いた Reader スタイルは、! important フラグが付いた作成者スタイルを含む他のすべてのスタイルをオーバーライドします。作成者スタイルと読者スタイルはどちらも、ユーザー エージェントのデフォルト スタイルより強力です。 ...ステートメントの順序付け。特異性が高い要素は、特異性が低い要素よりも大きな重みを持ちます。

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