ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS クラス構文における `.foo.bar` と `.foo .bar` の違いは何ですか?

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

Patricia Arquette
リリース: 2024-12-12 17:09:14
オリジナル
1008 人が閲覧しました

What's the Difference Between `.foo.bar` and `.foo .bar` in CSS Class Syntax?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート