CSS セレクターはクラス接頭辞に基づいて要素をターゲットにすることができますか?

クラス プレフィックス別の CSS セレクター

質問:

CSS を適用することは可能ですか?少なくとも 1 つのクラスが指定されたプレフィックスで始まる要素にルールを適用しますか?たとえば、次の HTML スニペットがあるとします。

<div>

「status-」で始まるクラスを持つ div のみをターゲットにするルールを適用できますか?

答え:

CSS 2.1:

CSS 2.1 では、これは不可能です。

CSS 3:

CSS3 では、属性の部分文字列一致セレクターが導入されました。これ可能:

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

• [class^="status-"] は、クラス属性が "status-" で始まる要素と一致します。
• [class*=" status-" ] は、クラス属性のスペース文字の直後に「status-」が含まれる要素と一致します (別の単語の一部でないことを確認します)。

注通常、クラス名はスペースで区切られるため、後者のセレクターには意図的なスペース文字が含まれています。これにより、要素のクラス属性内の他のクラスがチェックされ、クラス属性にスペースが埋め込まれているケースも処理されます。

ステータス プレフィックスが別の単語内に埋め込まれている要素がマークアップに含まれないことが保証できる場合は、セレクターを [class*="status-"] に単純化できます。ただし、堅牢性を確保するために、両方のセレクターを組み合わせることをお勧めします。

HTML 生成を制御できる場合は、目的のプレフィックスを持つ専用の「ステータス」クラスを作成する方が簡単かもしれません。

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