CSS セレクターを使用して複数のクラスを持つ HTML 要素を選択するにはどうすればよいですか?

CSS セレクターを使用して複数のクラスで要素をターゲットにする

HTML と CSS を使用する場合、要素に基づいて要素を選択する必要がある状況が発生することがあります。特定のクラスの値について。一般的な要件の 1 つは、複数のクラスが割り当てられた要素を選択することです。

質問:

次のクラスを持つ 3 つの div があるとします:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

CSSを使用して2番目の要素（「foo bar」クラスを使用）のみを選択するようにCSSを記述するにはどうすればよいですかselectors?

答え:

複数のクラスを持つ要素を選択するには、間にスペースを入れずにクラス セレクターを連鎖させます。この例では、CSS コードは次のようになります。

.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

このセレクターは、「foo」クラスと「bar」クラスの両方が割り当てられている唯一の要素であるため、2 番目の div にスタイルを適用します。 .

追加の注意:

Internet Explorer 6 などの古いブラウザは正しく解釈されない可能性があります。チェーンされたクラスセレクター。 IE6 は最後のクラス セレクターのみを読み取り、その他は無視します。 IE6 との互換性を確保するには、連鎖クラス セレクターの使用を避け、代わりに次のようなより具体的なセレクターを使用する必要があります。

以上がCSS セレクターを使用して複数のクラスを持つ HTML 要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。