CSS スタイルシートのオーバーライド順序はどのように機能しますか?

CSS スタイルシート オーバーライド順序: 解説

HTML ヘッダーでは複数のスタイルシートを参照できるため、その順序について疑問が生じます。優先権。この記事では、CSS スタイルシートのカスケードの性質を調査して、オーバーライドがどのように機能するかを明確にします。

提供された例では、ヘッダーに「styles.css」と「master.css」への参照が含まれています。後者は、カスケードの後半に表示される前者をオーバーライドします。ただし、具体性も重要な役割を果たします。

CSS カスケード ルールに従って、より具体的なルールがより一般的なルールをオーバーライドします。次の点を考慮してください:

body { margin:10px; }

このルールは、すべての要素に 10 ピクセルのマージンを適用します。ただし、より具体的なルールは次のとおりです。

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

このルールは、特定の要素 (html と本文) を対象とし、入力ボタンを除外するため、前のルールをオーバーライドします。このルールはカスケードの後半に表示され、より具体的であるため、優先されます。

特異性は、カスケードで使用される ID、クラス、要素名の数などの要素に基づいて計算されることに注意することが重要です。セレクタ。さらに、! important 宣言は他のすべてのルールをオーバーライドできます。

CSS スタイルシートのカスケードの性質と特異性を理解することで、開発者はデザインが意図したとおりにレンダリングされることを保証できます。ルールの優先順位の詳細については、W3C 仕様 (http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade) を参照してください。

以上がCSS スタイルシートのオーバーライド順序はどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。