CSS クラス セレクターの「.foo.bar」と「.foo .bar」の違いは何ですか?

CSS クラス構文の違いを理解する: '.foo.bar' と '.foo .bar'

CSS では、クラス名はスタイルを適用するために使用されます。 Web ページ上の特定の要素。ただし、クラス名の定義には 2 つの異なる構文が使用されます。1 つはスペースなしで、もう 1 つはスペースありです。

スペースなしの構文: .foo.bar

構文 .foo.bar は、.foo クラスと .bar クラスの両方を満たす要素を指します。つまり、.foo クラスと .bar クラスの両方が適用されている要素が選択されます。たとえば、次の CSS がある場合:

.foo {
  color: red;
}

.bar {
  background-color: blue;
}

そして、クラス .foo.bar を要素に適用すると、その要素は .foo クラスと .bar クラスの両方からスタイルを継承します。赤いテキストと青い背景が表示されます。

スペースを含む構文: .foo .bar

対照的に、構文 .foo .bar は、次の要素を選択します。 .foo クラスであり、.bar クラスを持つ要素の子孫です。たとえば、次の CSS の場合:

.foo {
  color: red;
}

.bar {
  background-color: blue;
}

クラス .foo .bar を要素に適用すると、.bar クラスの要素内にある .foo クラスの要素のみが選択されます。したがって、.foo クラスのみを持つ要素や、.bar 要素内に複数のレベルでネストされている要素は選択されません。

結論

これらの違いを理解する2 つの CSS 構文は、Web ページ上の要素にスタイルを正確に適用するために重要です。スペースのない構文では、複数のクラスが適用されている要素が選択され、スペースのある構文では、特定のコンテキスト内の特定のクラスを持つ要素が選択されます。

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