CSS3 ワイルドカード セレクターは、特定の文字列で始まるクラス名を持つ要素をターゲットにすることができますか?

クラス名の接頭辞の CSS3 ワイルドカード セレクター

ワイルドカード セレクターを使用して、特定の文字列で始まるクラス名を持つ要素を選択することはできますかCSS3で？たとえば、次の要素があります:

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

CSS を使用して、これらすべての div の色を一度に赤に設定できますか?

答えは「はい」です。これを実現するには、ワイルドカード文字を含む次の CSS セレクターを使用できます。

div[class^='myclass'], div[class*=' myclass'] {
    color: #F00;
}

^ (キャレット) セレクターは、クラス属性値が指定された文字列で始まる要素と一致します。この場合、「myclass-」で始まるクラス名を持つ要素と一致します。

* (アスタリスク) セレクターは、クラス属性値に指定された文字列がどこかに含まれる要素と一致します。これには、複数のクラス名を持つ要素が含まれ、そのうちの 1 つは「myclass-」で始まります。

これらのセレクターを組み合わせることで、文字列「myclass-」で始まるか、文字列「myclass-」を含むクラス名を持つすべての要素をターゲットにすることができます。 。これにより、CSS コードの 1 行で色を赤に設定できます。

以上がCSS3 ワイルドカード セレクターは、特定の文字列で始まるクラス名を持つ要素をターゲットにすることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。