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

複数のクラスを持つ要素をターゲットにする CSS セレクター

CSS を操作する場合、要素が特定の基準を満たすかどうかを判断することが重要です。そのようなシナリオの 1 つは、2 つ以上の特定のクラスに属する要素を識別することです。この記事では、ブラウザの互換性に関する考慮事項とともに、この問題に対する簡単な解決策を提供します。

複数のクラスを持つ要素を選択するには、CSS クラス セレクター構文を使用します。クラス名をスペースで区切らずに連結するだけです。たとえば、「foo」クラスと「bar」クラスの両方を持つ要素を選択するには、次のようにします。

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

ただし、Internet Explorer 6 インタープリターは、異なる方法でクラス セレクターをチェーンしました。このブラウザでは、最後のクラス セレクターのみが認識されます。互換性を確保するには、次のコードの使用を検討してください。

* {
  color: black;
}

.foo.bar {
  color: red;
}

このコードは、「foo」クラスと「bar」クラスの両方の要素に「赤」色を割り当てますが、他のすべての要素はデフォルトの「黒」を保持します。色。このアプローチを実装すると、IE6 を含むさまざまなブラウザーで一貫したスタイルを実現できます。

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