スタイルシートの順序は CSS オーバーライドの優先順位をどのように決定しますか?

CSS でのスタイルシート オーバーライド順序

HTML では、ヘッダー内でスタイルシートをリンクして、Web ページに特定のスタイルを適用できます。これらのスタイルシートの順序によって、どのスタイルが優先されるかが決まります。説明されているシナリオでは、styles.css と master.css という 2 つのスタイルシートがリンクされています。

オーバーライドの順序は CSS カスケードのルールに従います。 CSS の「最終行」ルールは、最後に宣言されたプロパティの値がそれ以前のすべての宣言よりも優先されることを決定します。ただし、このルールは単一のスタイルシート内にのみ適用されます。複数のスタイルシートの場合、次のルールが適用されます。

カスケード参照とスタイルシート参照

CSS のカスケード要素は、スタイルシート参照に対してと同様に機能しません。典型的な CSS 関数。スタイルシート参照に関しては、スタイルシートがリンクされる順序によって優先順位が決まります。最後にリンクされたスタイルシートは、以前にリンクされたスタイルシート内の競合するルールをオーバーライドします。

詳細度と !重要

CSS ルールの詳細度は、その重みを定義します。より高い特異性を持つルールは、より低い特異性を持つルールより優先されます。特異性は、セレクターで使用される ID、クラス、および要素名の数によって決まります。 ! important 宣言は、他のルールをオーバーライドするためにも使用できます。

例

指定されたシナリオでは、master.css はstyles.cssの後にリンクされます。両方のスタイルシートに body 要素のルールが含まれていると仮定すると、次の理由により、master.css のルールが style.css のルールをオーバーライドします:

• master.css は最後にリンクされます。
• master.css には、styles.css のより一般的なルールをオーバーライドする、より具体的なルール (例: html、body:not(input="button")) が含まれています。 (例: 本文).

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