CSS で同様のクラス名を持つ複数の要素を効率的にスタイル設定するにはどうすればよいですか?

CSS でワイルドカードを使用した複数の要素のスタイル設定

一意の識別子を使用して要素をスタイル設定する場合、それぞれに個別のクラスを作成するのは面倒になる場合があります。 CSS は、ワイルドカード文字 * を使用したエレガントなソリューションを提供します。

クラスにワイルドカードを使用する

この例では、それぞれ 2 つのクラスを持つ複数の div があり、1 つの共通クラス ( tocolor) と個別の識別子 (例: tocolor-1)。単一のクラスでスタイルを設定するには、次のワイルドカード構文を使用できます:

.tocolor-* {
  background: red;
}

ただし、おわかりのように、このメソッドは CSS では機能しません。

属性セレクター解決策

正しいアプローチは、属性セレクターを使用することです。これにより、要素に基づいて要素を選択できるようになります。彼らの属性の価値について。この場合、クラス属性を使用できます。

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red
}

• [class^="tocolor-"] は、クラス属性が "tocolor-" で始まる要素を選択します。
• [class*=" tocolor-"] は、クラス属性に「tocolor-」が含まれる要素を選択します。

この例では、両方の条件が次のようになります。 div をクラス tocolor-1、tocolor-2 などと照合します。

デモと詳細情報

このソリューションのライブ デモを見ることができます。 at:

[jsfiddle.net/K3693/1/](http://jsfiddle.net/K3693/1/)

CSS 属性セレクターの詳細については、以下を参照してください。リソース:

• [CSS 属性]セレクター](https://www.w3.org/TR/selectors/#attribute-selectors)
• [MDN ドキュメント: 属性セレクター](https://developer.mozilla.org/en-US/ docs/Web/CSS/Attribute_selector)

以上がCSS で同様のクラス名を持つ複数の要素を効率的にスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。