Comment appliquer deux classes CSS à un seul élément

Puis-je appliquer 2 classes à un seul div ou span ou à tout élément html? Par exemple:

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

J'ai essayé et dans mon cas c2 n'est pas appliqué. Comment puis-je appliquer les deux cours à la fois?

1) Utilisez plusieurs classes dans l'attribut class, séparées par des espaces ( ref ):

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

2) Pour cibler les éléments qui contiennent toutes les classes spécifiées, utilisez ce sélecteur CSS ( sans espace ) ( ref ):

.c1.c2 {
}

Incluez les deux chaînes de classe dans une seule valeur d'attribut de classe, avec un espace entre les deux.

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

Comme d'autres l'ont souligné, vous les délimitez simplement avec un espace.

Cependant, savoir comment fonctionnent les sélecteurs est également utile.

Considérez ce morceau de HTML ...

<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>

L'utilisation .a { ... }comme sélecteur sélectionnera le premier et le troisième. Cependant, si vous souhaitez en sélectionner un qui a à la fois aet b, vous pouvez utiliser le sélecteur .a.b { ... }. Notez que cela ne fonctionnera pas dans IE6, il sélectionnera simplement .b(le dernier).

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

C'est très clair que pour ajouter deux classes en un seul div, vous devez d'abord générer les classes, puis les combiner. Ce processus est utilisé pour apporter des modifications et réduire le non. des classes. Ceux qui créent le site Web à partir de zéro ont principalement utilisé ce type de méthodes. ils font deux classes, la première classe est pour la couleur et la seconde classe est pour définir la largeur, la hauteur, le style de police, etc. Lorsque nous combinons les deux classes, la première et la seconde classe sont toutes deux actives.

.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}

<div class="box color">orderlist</div>

Séparez-les par un espace.

<div class="c1 c2"></div>