CSS の特異性は継承されたプロパティにどのような影響を与えますか?

CSS プロパティの継承: 特異性の謎

CSS ルールを Web 要素に適用する場合、特異性の概念は、どの要素を適用するかを決定する上で重要な役割を果たします。ルールが優先されます。ただし、このコンテキストでの継承プロパティの扱いには、多くの場合疑問が生じます。

継承スタイルは、親要素からその子孫に継承されるプロパティです。継承されたプロパティの特異性が直接ターゲットのルールの特異性とどのように比較されるのか疑問に思うのは当然です。

特異性と継承

一般に信じられていることに反して、特異性は直接支配するものではありません。継承されたプロパティの優先順位。代わりに、要素をターゲットとする CSS 宣言の特異性が、継承されたプロパティよりも優先されます。

例: 継承されたスタイルのオーバーライド

次の HTML および CSS コードを考えてみましょう。

<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>

.all_red_text { color: red; }

この場合、 .all_red_text div は、ブラウザのデフォルトの黒色の動作を継承します。色: 赤; .all_red_text のプロパティはこの継承されたスタイルをオーバーライドし、テキストは赤で表示されます。

ただし、以下に示すように、h2 要素を直接ターゲットとするルールを追加すると、

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

この改訂版ではたとえば、色: 黒。 h2 要素に対して明示的にルールを適用すると、継承されたプロパティよりも優先されるため、すべての h2 テキストが黒になります。

結論

継承された CSS プロパティは、本質的に、直接ターゲットのルール。継承されたプロパティが親要素からのものであるかユーザー エージェントからのものであるかに関係なく、直接ターゲットのルールの特異性が常に高い優先順位を与えられます。 CSS で継承されたスタイルを操作するときに予期しない結果を回避するには、この動作を理解することが不可欠です。

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