Les caractères génériques CSS peuvent-ils rationaliser le style des classes dynamiques avec des identifiants uniques ?

Utilisation de CSS Wildcard pour le style de classe dynamique

Dans le style des éléments HTML, il est courant de rencontrer des identifiants uniques à côté de la classe principale. Dans le scénario fourni, plusieurs div sont stylisés à l'aide de la classe « tocolor », mais chacun nécessite un identifiant unique supplémentaire, tel que « tocolor-1 », « tocolor-2 », etc.

La question se pose : existe-t-il un moyen de rationaliser cela en utilisant un caractère générique () dans le sélecteur CSS ? La première tentative utilisant ".tocolor-" n'a donné aucun résultat.

La solution réside dans l'exploitation des sélecteurs d'attributs. Les sélecteurs d'attributs vous permettent de cibler des éléments en fonction de leurs attributs, tels que leur classe. Dans ce cas, les sélecteurs suivants produiraient l'effet souhaité :

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red;
}

Le sélecteur "[class^="tocolor-"]" cible les éléments dont l'attribut de classe commence par "tocolor-", tandis que le " Le sélecteur [class*=" tocolor-"]" cible les éléments dont l'attribut de classe contient la sous-chaîne "tocolor-" après un caractère espace.

Répartition du Sélecteurs :

• "[class^="tocolor-"] : fait correspondre les éléments avec des attributs de classe commençant par "tocolor-", tels que "tocolor-1", "tocolor- 2", et ainsi de suite.
• "[class*=" tocolor-"] : matche les éléments avec des attributs de classe qui contiennent la sous-chaîne "tocolor-" immédiatement précédée d'un espace caractère, tel que "tocolor-1", "test tocolor-2", etc.

En utilisant ces sélecteurs d'attributs, vous pouvez appliquer le style souhaité à plusieurs éléments avec différents identifiants uniques en utilisant un seul sélecteur de classe. Cela simplifie le code CSS et améliore la maintenabilité.

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!