CSS クラス構文における `.foo.bar` と `.foo .bar` の違いは何ですか?

CSS クラス構文: .foo.bar と .foo .bar

CSS では、要素にクラスを追加するための構文が異なる場合があり、その意図について混乱が生じる可能性があります。使用法。この質問では、次の 2 つのクラス構文の違いについて説明します:

.element .symbol と .element.large .symbol

説明

1. .element .symbol: この構文は、.symbol クラスが適用されることを意味します。すでに .element クラスを持つ要素。つまり、 .element クラスの要素の子孫である要素が選択されます。
2. .element.large .symbol: この構文は異なります。ここでは、.large クラスが .element クラスにアタッチされています。これは、.symbol クラスが .element クラスと .large クラスの両方を持つ要素に適用されることを意味します。

例

この概念を説明するために、次の HTML と CSS を考えてみましょう。

<div class="element">
  <div class="symbol"></div>
</div>

<div class="element large">
  <div class="symbol"></div>
</div>

.element .symbol {
  color: red;
}

.element.large .symbol {
  font-weight: bold;
}

この例では、.element 内の最初の .symbol div div は赤色で表示されますが、.elementlarge div 内の 2 番目の .symbol div は両方とも赤色で太字で表示されます。

結論

2 つのクラス構文の違いは、次の関係にあります。指定されたクラスの間。 .foo.bar は bar クラスを持ち、foo クラスを持つ要素の子孫である要素を選択します。一方、 .foo .bar は foo クラスと bar クラスの両方を持つ要素を選択します。

以上がCSS クラス構文における `.foo.bar` と `.foo .bar` の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。