CSS の継承は特異性とプロパティのオーバーライドにどのような影響を与えますか?

継承された CSS プロパティと詳細度

複数の CSS 宣言が同じ要素を対象とする場合、最も詳細度が高いものが優先されます。 CSS 特異性の計算ルールは、W3 勧告に詳しく文書化されています。ただし、継承されたプロパティがこのスキームにどのように適合するかはあまり明確ではありません。

継承されたプロパティは、親要素の特異性とそれ自体の特異性を効果的に組み合わせるため、継承により複雑な層が生じます。これは、具体性の高い親要素から継承されたプロパティが、具体性の低い直接適用されたプロパティをオーバーライドできることを意味します。

次の例を考えてみましょう。

<h2 class="all_red_text">This should be black</h2>

h2 {
  color: black;
}

.all_red_text {
  color: red;
}

この例では、 color プロパティは

から継承されます。クラス all_red_text の要素。 all_red_text クラスの特異性は 0,1,0 です。 h2 セレクターの特異性は 0,0,1 です。

CSS の特異性ルールに従って、より具体的なセレクター (この場合は h2 セレクター) が優先される必要があります。ただし、color プロパティは継承されるため、事実上、親要素 (0,1,0) の特異性を持ちます。

その結果、親要素から継承された color プロパティは、直接適用された color プロパティをオーバーライドします。 。 h2 要素内のテキストは赤ではなく黒です。

この動作は最初は混乱するかもしれませんが、CSS 継承の仕組みの重要な部分です。継承されたプロパティが特異性にどのように影響するかを理解することで、予期しない結果を回避し、CSS コードが意図したとおりに動作することを確認できます。

以上がCSS の継承は特異性とプロパティのオーバーライドにどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。