ホームページ > 記事 > ウェブフロントエンド > [閲覧注意] CSS 決定版ガイド 2: 構造と Cascading_html/css_WEB-ITnose
おそらく、カスケード スタイル シートの最も基本的な側面の 1 つはカスケードです。これは、矛盾する宣言が並べ替えられ、最終的なドキュメント表現が決定されるカスケード プロセスです。このプロセスの中心となるのは、セレクターとそれに関連する宣言の特殊性、および継承メカニズムです。
具体性
ルールごとに、ユーザー エージェントはセレクターの特異性を計算し、この特異性をルール内の個々の宣言に追加します。要素に 2 つ以上の競合する属性宣言がある場合、最も高い特異性を持つ宣言が優先されます。
セレクターで指定された各 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 フラグのないルールよりも重みが高くなります。