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

CSS で複数のクラスを持つ要素を選択する

多くの Web 開発者は、特定のクラスの組み合わせに基づいて要素を選択する必要に遭遇することがよくあります。それぞれが異なるクラス属性を持つ複数の要素があり、2 つの特定のクラスに属する要素のみをターゲットにしたいというシナリオを考えてみましょう。

これを実現するために、CSS はクラス セレクターを連鎖するという簡単な解決策を提供します。スペースを入れずにクラス名を連続して指定すると、両方のクラスを持つ要素を照合できます。

たとえば、次のようにクラス属性が割り当てられた 3 つの div があるとします。

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

「foo」クラスと「bar」クラスの両方を持つ 2 番目の div のみを選択するには、次のコマンドを使用します。 CSS:

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

このセレクターは、両方のクラス属性を持つという基準を満たす要素にスタイルを効果的に適用します。

ただし、Internet Explorer 6 には連鎖クラスに関する制限があることに注意することが重要です。セレクター。他のブラウザとは異なり、IE6 は最後にリストされたクラス セレクターのみを認識するため、予期しない動作が発生する可能性があります。この問題に対処するには、古いブラウザのサポートに条件ステートメントを使用することをお勧めします。

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