CSS で特定の文字列で始まるクラス名を持つ要素をスタイルするにはどうすればよいですか?

特定の文字列で始まるクラス名を持つ要素のスタイル化

CSS3 では、ワイルドカードを使用して、クラス名が特定の文字列で始まる要素と一致させることができます。これにより、類似したクラス名を持つ複数の要素を簡潔かつ効率的にスタイル設定できます。

次の HTML 構造を考えてみましょう:

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

これらの div をすべて同じ色でスタイルするには、次の CSS ルールを使用できます:

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

このルールがどのように機能するかは次のとおりです。 works:

• class^='myclass' は、クラス名が文字列「myclass」で始まるすべての要素に一致します。この場合、上記の 3 つの div が選択されます。
• class*=' myclass' は、クラス名に部分文字列「myclass」が含まれるすべての要素と一致します。また、3 つの div も選択されます。

色: #f00;プロパティは、選択されたすべての要素の色を赤に設定します。

このワイルドカード アプローチを使用すると、CSS ルールで個別のクラス名を指定することなく、類似したクラス名を持つ複数の要素のスタイルを簡単に更新できます。

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