CSS クラス: スペースとスペースなし — 違いは何ですか?

CSS クラス: スペースありとスペースなし

CSS では、クラス セレクターを記述する方法が 2 つあります。スペースあり (.class .class)、スペースなし (.class.class)。各構文は異なる目的を果たします。

スペースなし: .class.class

この構文は、要素がセレクターと一致するために両方のクラスを持つ必要があることを示します。たとえば、 .element.large .symbol は、large クラスを持つ .element 要素内の任意の .symbol 要素を選択します。

スペースあり: .class .class

この構文は、要素には両方のクラスが任意の順序で存在する必要があることを示します。たとえば、 .element .symbol は、.element 要素内にある任意の .symbol 要素を選択します。ただし、ドキュメント内の位置に関係なく、.symbol クラスを持つ .element 要素も選択されます。

例:

次の CSS を考えてみましょう。

.element {
  color: black;
}

.large {
  font-size: 2em;
}

.symbol {
  font-family: monospace;
}

• .element .symbol はすべての .symbol 要素を選択しますこれらは .element 要素内にあり、 .element.
• .element.large .symbol から color: black スタイルを継承します。これにより、同じくlarge クラスを持つ .element 要素内にあるすべての .symbol 要素が選択されます。そして、color: black と font-size: 2em スタイルを継承します。

以上がCSS クラス: スペースとスペースなし — 違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。