ホームページ >ウェブフロントエンド >CSSチュートリアル >クラス接頭辞に基づいて CSS 要素を選択するにはどうすればよいですか?
クラス接頭辞用の属性ベースの CSS セレクター
CSS では、クラス接頭辞に基づいて要素を識別するのは複雑な作業となる場合があります。クラスが「status-」などの特定の接頭辞で始まる要素にルールを適用するシナリオを考えてみましょう。
CSS 互換性
残念ながら、 CSS 2.1 には、このタスクに必要なセレクターがありません。ただし、CSS3 では属性部分文字列一致セレクターが導入されており、これにより新たな可能性が開かれます。
CSS3 属性セレクター
取り組むことができる CSS3 属性セレクターこの挑戦are:
セレクターの組み合わせ
必要な要素をすべてキャプチャするには、これらを組み合わせる必要があります。 2 つのセレクター:
div[class^="status-"], div[class*=" status-"]
この組み合わせにより、「status-」で始まるクラスを持つ要素と、空白文字に続く "status-" 部分文字列は両方とも選択されます。
注意事項と代替案
[class*="status-"] セレクターは次のことができることに注意してください。 HTML に「foo-status-bar」のようなクラスが含まれている場合は、望ましくない要素と一致します。これを回避するには、そのようなシナリオが不可能であることを確認してください。
あるいは、マークアップを生成する HTML またはアプリケーションを制御できる場合は、独自のプレフィックスを持つ専用の「ステータス」クラスを作成する方が簡単な場合があります。これによりプロセスが簡素化され、一貫性が確保されます。
以上がクラス接頭辞に基づいて CSS 要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。