マルチタイプセレクターの使用_html/css_WEB-ITnose

html

1 <p class="urgent warning">This is urgent warning.</p>2 <p>Well,<span class="warning">This is warning.</span>What else?</p>

css

1 .warning{font-weight:bold;}2 .urgent{font-style:italic;}3 .warning.urgent{background:silver;}

効果

説明

上記からわかるように、クラス値に単語リストが含まれる場合、クラスがマルチカテゴリセレクターになりました。 CSS でクラスの属性 (.warning) を定義する際、マルチクラスの単語リスト (.urgent warning) にクラス名が存在する場合、マルチクラスも定義されます。 .warning.urgent の記述方法では、class 値に warning と緊急の両方を含める必要があると規定されているため、この定義は 2 行目 (.warning) には影響しません。

互換性の観点から、IE7以降ではマルチカテゴリセレクターが正しく処理できません。

html

すごい

css

すごい

効果

要件

丸を赤丸に変えてください。

説明

円のクラスを新しいクラス (.circle) に変更する場合は、同じスタイル (.red、.circle) をマージしてから、別の .circle{border-radius:35px を記述します。 } が解決策です。

また、マルチクラス セレクターを使用する場合は、circle のクラス値に円 (.red Circle) を追加し、別の .red.circle{border-radius:35px} を記述することでも問題を解決できます。

この 2 つを比較すると、この場合、マルチクラス セレクターを使用する方が高速で、不必要なコードの冗長性が排除され、拡張が容易になります。

参考:

CSSクラスセレクターの詳しい説明