CSS セレクターでワイルドカードを使用して複数のクラスに一致させることはできますか?

CSS セレクター: ワイルドカードを使用した複数のクラスの一致

CSS では、ワイルドカード文字を使用することでクラス名に基づく要素の選択を簡素化できます。 。このワイルドカード手法は、特定の文字列で始まるクラス名を持つ複数の要素を照合する必要がある場合に便利です。

問題:

ワイルドカード セレクターを使用することは可能ですか? CSSで特定の文字列で始まるクラス名を持つ要素を選択するには?たとえば、次の HTML 要素について考えてみましょう:

<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>

回答:

これらの要素をすべてワイルドカード セレクターで選択するには、次の CSS コードを使用できます。

div[class^="myclass"],
div[class*=" myclass"] {
  color: #f00;
}

このセレクター内:

• div[class^="myclass"] は、クラス名が「myclass」で始まる要素と一致します。
• div[class*=" myclass"] は、クラス名に文字列「myclass」が含まれる要素と一致します。

これらのワイルドカードを使用すると、効果的にすべてをターゲットにできます。個々のクラス名を指定する必要がなく、「myclass」で始まるクラス名を持つ要素。

以上がCSS セレクターでワイルドカードを使用して複数のクラスに一致させることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。