ワイルドカードと CSS 属性セレクターを使用して、複数の一意の識別子を持つ要素をスタイル設定するにはどうすればよいですか?

CSS でワイルドカードを使用した複数の一意の識別子を持つ要素のスタイル設定

フロントエンド開発では、共通クラスと一意の識別子の両方に基づいて要素をスタイル設定することが必要になることがよくあります。次のシナリオを考えてみましょう:

クラス ".tocolor" を使用して赤い背景でスタイル設定したい複数の div があります。ただし、各 div を番号で一意に識別する必要もあります (例: tocolor-1、tocolor-2、tocolor-3)。

最初は、以下に示すように、スタイルを簡素化するためにワイルドカードを使用しようとしました。

.tocolor-* {
  background: red;
}

しかし、この方法はうまくいきませんでした。この問題の解決策は CSS 属性セレクターにあります。要素のクラス属性をターゲットにすることで、特定のパターンに基づいて要素をスタイル設定できます。

ワイルドカードを使用したスタイル設定のための属性セレクター

このシナリオで使用できる属性セレクターには 2 種類があります。

• [attribute^="value"]: 次の要素と一致します。属性は指定された値で始まります。
• [attribute*="value"]: 属性に指定された値が含まれる要素と一致します。

指定された 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>
<div class="tocolor tocolor-4">   tocolor 4   </div>

次の属性を使用できますselectors:

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

• [class^="tocolor-"]: クラス属性が「tocolor-」で始まるすべての div と一致します。
• [class*=" tocolor-"]: class 属性に部分文字列が含まれるすべての div に一致します"tocolor-".

使用法とデモ

これらの属性セレクターを使用すると、次に示すように、共通の ".tocolor" クラスと一意の識別子の両方に基づいて要素を効果的にスタイル設定できます。次のデモ:

[ライブデモ](http://jsfiddle.net/K3693/1/)

さらなる学習のためのリソース

• CSS 属性セレクター: https://developer.mozilla.org/en -US/docs/Web/CSS/Attribute_selectors
• MDN ドキュメント属性セレクター: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

以上がワイルドカードと CSS 属性セレクターを使用して、複数の一意の識別子を持つ要素をスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。