Les sélecteurs CSS peuvent-ils cibler des éléments en fonction des préfixes de classe ?

Les sélecteurs CSS peuvent-ils cibler des éléments en fonction des préfixes de classe ?

Dans les scénarios où vous souhaitez appliquer des règles CSS aux éléments qui ont une classe partagée préfixe, CSS2.1 présente des limitations. Cependant, avec l'introduction des sélecteurs de correspondance de sous-chaînes d'attribut CSS3, cela devient réalisable.

Pour y parvenir, utilisez les sélecteurs d'attributs suivants :

• [class^=" status-"] : Correspond aux éléments dont les noms de classe commencent par "status-".
• [class*=" status-"] : Fait correspondre les éléments dont les noms de classe contiennent "status-" immédiatement après un caractère espace.

En combinant ces sélecteurs, il devient possible de cibler les éléments dont les attributs de classe répondent aux spécifications spécifiées. conditions, y compris les cas où plusieurs classes sont présentes :

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

Il est important de noter que l'approche ci-dessus évite de faire correspondre des éléments avec des attributs de classe comme "foo-status-bar", ce qui peut être indésirable.

Des solutions alternatives peuvent inclure l'utilisation de jQuery ou la restructuration du balisage HTML pour inclure explicitement les préfixes d'état en tant que classes distinctes. Cependant, les sélecteurs de correspondance de sous-chaînes CSS3 fournissent une solution robuste et uniquement CSS pour traiter les préfixes de classe dans les règles de style.

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!