継承された CSS プロパティと詳細度
複数の CSS 宣言が同じ要素を対象とする場合、最も詳細度が高いものが優先されます。 CSS 特異性の計算ルールは、W3 勧告に詳しく文書化されています。ただし、継承されたプロパティがこのスキームにどのように適合するかはあまり明確ではありません。
継承されたプロパティは、親要素の特異性とそれ自体の特異性を効果的に組み合わせるため、継承により複雑な層が生じます。これは、具体性の高い親要素から継承されたプロパティが、具体性の低い直接適用されたプロパティをオーバーライドできることを意味します。
次の例を考えてみましょう。
<h2 class="all_red_text">This should be black</h2>
h2 {
color: black;
}
.all_red_text {
color: red;
}この例では、 color プロパティは
CSS の特異性ルールに従って、より具体的なセレクター (この場合は h2 セレクター) が優先される必要があります。ただし、color プロパティは継承されるため、事実上、親要素 (0,1,0) の特異性を持ちます。
その結果、親要素から継承された color プロパティは、直接適用された color プロパティをオーバーライドします。 。 h2 要素内のテキストは赤ではなく黒です。
この動作は最初は混乱するかもしれませんが、CSS 継承の仕組みの重要な部分です。継承されたプロパティが特異性にどのように影響するかを理解することで、予期しない結果を回避し、CSS コードが意図したとおりに動作することを確認できます。
以上がCSS の継承は特異性とプロパティのオーバーライドにどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
