CSS の特異性は継承されたプロパティとどのように相互作用しますか?

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

CSS 継承の詳細度は、Web 開発者を困惑させてきました。継承されたプロパティは、祖先要素のスタイルから継承されたものと同様、要素の特異性に直接影響しません。ただし、継承されたプロパティと CSS で明示的に定義されたプロパティの間の相互作用は重要な考慮事項です。

次の HTML スニペットを考えてみましょう:

<h2 id="This-should-be-black">This should be black</h2>
<div class="all_red_text">
    <h2 id="This-should-be-red">This should be red</h2>
</div>

次の CSS を適用すると:

.all_red_text { color: red; }

「これは赤色であるべきです」というテキストは予想通り赤色に変わります。ただし、CSS を次のように変更すると、

h2 { color: black; }
.all_red_text { color: red; }

すべてのテキストが黒になります。これは、 h2 { color: black; などの明示的なプロパティ宣言が原因です。

重要な点は、特異性によって継承プロパティの優先順位が決まるわけではないということです。代わりに、同じスタイルに対して明示的に宣言されたプロパティが存在すると、継承されたプロパティがオーバーライドされます。したがって、継承されたプロパティを扱うときは、継承された値と競合する可能性のある明示的なプロパティ宣言があるかどうかを考慮することが重要です。

以上がCSS の特異性は継承されたプロパティとどのように相互作用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。