Comment puis-je sélectionner des éléments CSS en fonction des préfixes de classe ?

Sélecteurs CSS basés sur des attributs pour les préfixes de classe

En CSS, identifier des éléments basés sur des préfixes de classe peut être une tâche déroutante. Considérez le scénario dans lequel vous souhaitez appliquer une règle à tout élément dont la classe commence par un préfixe spécifique, tel que "status-".

Compatibilité CSS

Malheureusement, CSS 2.1 ne dispose pas des sélecteurs nécessaires pour cette tâche. Cependant, CSS3 introduit des sélecteurs de correspondance de sous-chaînes d'attributs, qui ouvrent de nouvelles possibilités.

Sélecteurs d'attributs CSS3

Les sélecteurs d'attributs CSS3 qui peuvent s'attaquer ce défi sont :

• [class^="status-"] : correspond aux éléments dont L'attribut de classe commence par "status-".
• [class*=" status-"] : correspond aux éléments dont l'attribut de classe contient la sous-chaîne "status-" immédiatement précédée d'un caractère d'espacement. Notez le caractère espace, qui garantit que la correspondance ne se fait pas sur d'autres classes.

Combinaison de sélecteurs

Pour capturer tous les éléments souhaités, vous devez les combiner deux sélecteurs :

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

Cette combinaison garantit que les éléments avec des classes commençant par "status-" et les éléments avec une sous-chaîne "status-" suivant un Les caractères d'espacement sont tous deux sélectionnés.

Précautions et alternatives

Gardez à l'esprit que le sélecteur [class*="status-"] peut correspondre à des éléments indésirables si votre code HTML inclut des classes comme "foo-status-bar". Pour éviter cela, assurez-vous que de tels scénarios sont impossibles.

Alternativement, si vous contrôlez le code HTML ou l'application générant le balisage, il peut être plus simple de créer une classe de « statut » dédiée avec son propre préfixe. Cela simplifie le processus et garantit la cohérence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!