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

複数のクラスを持つ要素の CSS セレクター

CSS で特定のクラスの組み合わせを持つ要素をターゲットにする方法を決定することは、Web 開発における一般的な要件となる場合があります。 3 つの div 要素が異なるクラスの組み合わせを持つ次のシナリオを考えてみましょう:

<br><div><div class="foo bar">Hello World</div><br>&lt ;div>

タスクは 2 番目の要素を選択することです。 foo クラスと bar クラスの両方があります。

解決策: 連鎖クラス セレクター

これを実現するために、CSS セレクターは、クラス セレクターを連鎖するという簡単な解決策を提供します。次のコードのように、スペースを入れずにクラス名を一緒に記述します。

.foo.bar {
  /* Styles for elements with both foo and bar classes */
}

このセレクターは、両方のクラスを持つ唯一の要素であるため、提供された HTML の 2 番目の div 要素にのみ適用されます。 .

Internet Explorer 6 に関する注意

ただし、Internet Explorer では次の点に注意することが重要です。 6 には、連鎖クラス セレクターに関する注意事項があります。チェーン内の最後のクラス セレクターのみを認識し、それより前のクラス セレクターは無視されます。上の例では、IE6 はスタイルを bar クラスを持つ要素にのみ適用し、foo クラスを持つ要素には適用しません。

例

次のことを考えてください。スニペット:

*{
  color:black;
}

.foo.bar {
  color:red;
}

<div>

このシナリオでは、IE6 以外のブラウザーは 2 番目の div に赤色を適用しますが、 IE6 は bar クラスのみを考慮するため、これを 3 番目の div に適用します。古いブラウザのサポートが要件である場合、この動作は特に注意が必要です。

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