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

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

共有クラスを持つ要素に CSS ルールを適用するシナリオプレフィックスを使用する場合、CSS2.1 には制限があります。ただし、CSS3 属性の部分文字列一致セレクターの導入により、これが可能になります。

これを実現するには、次の属性セレクターを利用します:

• [class^=" status-"]: で始まるクラス名を持つ要素と一致します。 "status-".
• [class*=" status-"]: スペース文字の直後に「status-」を含むクラス名の要素と一致します。

これらのセレクターを組み合わせることで、複数のクラスが存在する場合も含め、指定した条件を満たすクラス属性を持つ要素を対象とすることが可能になりますpresent:

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

上記のアプローチでは、要素と "foo-status-bar" のようなクラス属性の一致が回避されることに注意することが重要ですが、これは望ましくない可能性があります。

代替ソリューションには、次の使用が含まれる場合があります。 jQuery を使用するか、HTML マークアップを再構築して、ステータス プレフィックスを別のクラスとして明示的に含めます。ただし、CSS3 部分文字列一致セレクターは、スタイル ルールでクラス プレフィックスをアドレス指定するための堅牢な CSS 専用ソリューションを提供します。

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