CSS はクラス接頭辞に基づいて要素を選択できますか?

プレフィックスベースの CSS クラス選択は可能ですか?

Web 開発の領域では、多くの場合、CSS ルールを要素ベースに適用する必要があります。特定のクラスのプレフィックスについて。たとえば、クラスが「status-」プレフィックスで始まる要素をターゲットにするとよいでしょう。

CSS2.1 ではそれはできません

残念ながら、CSS2 .1 では、プレフィックスベースのクラス選択を実現する直接的な方法は提供されていません。ただし、CSS3 属性の部分文字列一致セレクターが役に立ちます。

CSS3 によるプレフィックスベースの選択

CSS3 では、役立つ 2 つの属性セレクターが導入されています。

[class^="status-"], div[class*=" status-"]

の内訳セレクター:

• [class^="status-"] - クラス属性が「status-」で始まる要素と一致します。
• [class*=" status-" ] - 空白で区切られた文字列内のクラス属性に「status-」が含まれる要素と一致します。

これら 2 つのセレクターの組み合わせ複数のスペースで区切られたクラスを持つ要素も含めて、すべての適切な要素を確実にキャッチします。

もう 1 つの注意事項

単純に [class*="status-"] を使用することに注意してください。次のような要素にも一致する可能性があります:

<div>

これを回避するには、次のように 2 つのセレクターを組み合わせるのが最善です。

その他のオプション

HTML マークアップを制御できる場合、より簡単な方法は、ステータス プレフィックスを次のように独自のクラスに分割することです。

<div>

これにより、[class="status- important"] を持つ要素をターゲットにすることができます。

以上がCSS はクラス接頭辞に基づいて要素を選択できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。