css - 継承されたクラスが存在する場合、CSSで要素をターゲットにできますか？

Question

スペースで区切られた要素に複数のクラスがある場合があります。

<div class="header contaminated">...</div>

両方のクラスが要素に直接適用される場合は問題ありません。両方のスタイルを持つCSSで要素をターゲットにしたいのですが、一方のスタイルは親からのものです：

例

<div class="contaminated">
  <div class="header">...</div>
</div>

通常、私はaheaderを青としてスタイリングしたい：

.header { background-color:  #99FFFF; }

しかし、aの場合、div背景contaminated全体を赤に着色します。

.contaminated { background-color: Pink; }
.contaminated.header { background-color: HotPink; }

私がcssセレクター構文.contaminated.headerが「継承された」スタイルに有効であるとは思わないことを除いて。

注：それが有効でないと思う理由は、それが機能しないためです

2つのクラスのみが含まれ、一部のクラスが「継承」されている場合、CSSで要素をターゲットにすることは可能ですか？

score 4 · Accepted Answer

これは基本的なCSSです。クラス名をスペースで区切ります。これはカスケードを暗示/適用します。

.contaminated .header { ... }

何か問題がありますか？

乾杯

score 2 · Accepted Answer

私はあなたの質問について混乱しています、これはそれをしませんか？

.contaminated .header { background-color: HotPink; }

「.containatedのクラスを持つ要素内で.headerのクラスを持つ要素を探してください」と言っているスペースに注意してください。

score 1 · Accepted Answer

.contaminated>.header{}

.containatedの直接の子である要素ヘッダーのみをターゲットにします

3 に答える 3