Comment appliquer plusieurs classes CSS à un seul élément HTML ?

Application de plusieurs classes CSS à un seul élément

En HTML, l'attribut class peut être utilisé pour spécifier des classes CSS pour styliser un élément. Cependant, il est courant de rencontrer le problème où une seule classe est appliquée si vous attribuez plusieurs classes au sein du même attribut de classe.

Problème :

Application de plusieurs classes à un un seul élément utilisant des attributs de classe distincts, comme indiqué ci-dessous, ne fonctionne pas toujours comme prévu :

<code class="html"><a class="c1" class="c2">aa</a></code>

Réponse :

Il existe deux méthodes pour appliquer plusieurs CSS classes à un seul élément de manière efficace :

Méthode 1 : plusieurs classes dans l'attribut de classe

Séparez les noms de classe par des espaces dans l'attribut de classe :

<code class="html"><a class="c1 c2">aa</a></code>

Cette méthode attribue simultanément les deux classes à l'élément.

Méthode 2 : sélecteur CSS pour plusieurs classes

Pour cibler un élément qui contient toutes les classes spécifiées, utilisez le sélecteur CSS suivant sans aucun espace entre les noms de classe :

<code class="css">.c1.c2 {
    /* CSS properties */
}</code>

Ce sélecteur vérifie les éléments auxquels les classes "c1" et "c2" sont appliquées.

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!