CSS セレクターを使用して、類似したクラス名を持つ複数の Div のスタイルを設定するにはどうすればよいですか?

CSS クラスでのワイルドカードの利用

クエリでは、一意の識別子 (例: tocolor-1) を含めながら、共通クラス「tocolor」を使用して複数の div のスタイルを設定することを目的としています。 、tocolor-2)。 CSS でワイルドカード「*」を使用してこれを簡素化しようとしましたが、失敗しました。

希望の結果を達成するために、CSS に属性セレクターを導入します。属性セレクターを使用すると、クラス値などの特定の属性に基づいて要素をターゲットにすることができます。

シナリオでは、次の CSS セレクターを利用できます:

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

その仕組みは次のとおりです。

• [class^="tocolor-"]: このセレクターは、クラス属性がで始まる要素と一致します。 "tocolor-".
• [class*=" tocolor-"]: このセレクターは、クラス属性に文字列内の空白文字が前にある「tocolor-」を含む要素と一致します。

これら 2 つのセレクターを組み合わせることで、これらの基準のいずれかを満たすクラスを持つ任意の要素をターゲットにすることができます。

たとえば、次の HTML があるとします。構造:

<div class="tocolor tocolor-1">tocolor 1</div>
<div class="tocolor tocolor-2">tocolor 2</div>
<div class="tocolor tocolor-3">tocolor 3</div>

上記の CSS セレクターを適用すると、これらすべての div の色が赤に設定されます。

JSFiddle でこのインタラクティブなデモを確認してください: http://jsfiddle.net/K3693 /1/

CSS 属性セレクターのより包括的な情報については、次を参照してください。リソース:

• CSS 属性セレクター (W3Schools): https://www.w3schools.com/cssref/css_selectors.asp
• 属性セレクター (MDN Web ドキュメント): https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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