Comment puis-je faire correspondre efficacement les classes CSS en fonction d'un préfixe ?

Sélecteurs CSS pour la correspondance des préfixes de classe

Réaliser une application de règles CSS basée sur un préfixe de classe spécifique peut présenter un défi. Bien que CSS 2.1 ne dispose pas de cette fonctionnalité, CSS3 propose une solution avec des sélecteurs de correspondance de sous-chaînes d'attributs.

Solution CSS3 :

CSS3 introduit le [class^="prefix-" ] et les sélecteurs [class*=" prefix-"] . Le premier correspond aux éléments dont l'attribut de classe commence par "préfixe-", tandis que le second correspond aux éléments contenant "préfixe-" après un caractère d'espacement.

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

Cette combinaison garantit la correspondance pour les éléments dont l'attribut de classe remplit l'une ou l'autre des conditions. . L'utilisation d'un caractère espace dans le deuxième sélecteur empêche les correspondances pour les éléments avec des noms de classe comme « status-bar ». Cependant, il vérifie efficacement les classes suivantes si plusieurs sont spécifiées ou tient compte du remplissage d'espace dans la valeur de l'attribut.

Robustesse :

Notez que l'utilisation de [class= "status-"] seul peut conduire à des correspondances indésirables, telles que des éléments avec un nom de classe comme "foo-status-bar". La combinaison de [class^="status-"] et [class=" status-"] offre une plus grande robustesse.

Approche alternative :

Si faisable, pensez à créer une classe dédiée avec le préfixe status pour simplifier la règle CSS. Cette approche peut éviter le besoin de sélecteurs d'attributs complexes.

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!