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

クラスの CSS でのワイルドカードの使用: * および属性セレクター

特定のパターンに従う複数のクラスで要素をスタイル設定する場合、個別のルールを作成するのは面倒な場合があります。それぞれのバリエーション。ここで CSS ワイルドカードが登場します。

あなたの場合、「tocolor-1」、「tocolor-2」、「tocolor-3」のようなクラス名を持つ複数の要素に背景色を適用したいと考えています。 「.tocolor-*」のようなワイルドカードを使用すると解決策のように見えるかもしれませんが、CSS では機能しません。

代わりに、属性セレクターを利用してこれを実現できます。目標。属性セレクターを使用すると、クラスなどの属性に基づいて要素をターゲットにすることができます。

[class^="tocolor-"], [class*=" tocolor-"] {
  background: red;
}

このコードでは、属性セレクター [class^="tocolor-"] は、クラス属性が " で始まる要素をターゲットにします。 tocolor-"、"tocolor-1"、"tocolor-2" などのクラス名を持つすべての要素を効果的に照合します。

セレクター [class*=" tocolor-"]クラス属性に部分文字列「tocolor-」とそれに続くスペース文字が含まれる要素をターゲットとします。これは、「tocolor-highlight」、「my-class tocolor-blue」などの要素と一致します。

属性セレクターを使用すると、共有パターンに基づいて要素のグループにスタイルを適用できます。冗長で反復的なクラス宣言の場合。

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

• [CSS 属性セレクター](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
• [CSS 属性]セレクター](https://www.w3schools.com/cssref/css_selectors.asp)

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