プレフィックスに基づいて CSS クラスを効率的に照合するにはどうすればよいですか?

クラス プレフィックス マッチング用の CSS セレクター

特定のクラス プレフィックスに基づいて CSS ルールを適用することには課題が生じる可能性があります。 CSS 2.1 にはこの機能がありませんが、CSS3 では属性部分文字列一致セレクターを使用したソリューションが提供されています。

CSS3 ソリューション:

CSS3 では [class^="prefix-" が導入されています。 ] および [class*=" prefix-"] セレクター。前者はクラス属性が「prefix-」で始まる要素と一致し、後者は空白文字の後に「prefix-」を含む要素と一致します。

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

この組み合わせにより、クラス属性がいずれかの条件を満たす要素が確実に一致します。 。 2 番目のセレクターでスペース文字を使用すると、「status-bar」のようなクラス名を持つ要素との一致が防止されます。ただし、複数のクラスが指定されている場合、または属性値のスペース パディングが考慮されている場合は、後続のクラスを効果的にチェックします。

堅牢性:

[class= を使用することに注意してください。 "status-"] だけでは、"foo-status-bar" のようなクラス名を持つ要素など、望ましくない一致が発生する可能性があります。 [class^="status-"] と [class=" status-"] を組み合わせると、より堅牢性が高まります。

代替アプローチ:

場合可能であれば、CSS ルールを簡素化するために、ステータス プレフィックスを持つ専用クラスを作成することを検討してください。このアプローチにより、複雑な属性セレクターの必要性を回避できます。

以上がプレフィックスに基づいて CSS クラスを効率的に照合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。