Comment appliquer deux classes CSS à un seul div / span

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

aa 

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

1) Utiliser plusieurs classes à l’intérieur de l’atsortingbut class, séparées par des espaces ( ref ):

 aa 

2) Pour cibler des éléments contenant 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 valeur d’atsortingbut de classe unique, avec un espace entre les deux.

  aa  

Comme d’autres l’ont fait remarquer, vous les délimitez simplement avec un espace.

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

Considérez ce morceau de HTML …

 

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

 aa 

Séparez-les avec un espace.

 

Ceci est très clair: pour append deux classes dans 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 à partir de zéro ont surtout utilisé ce type de méthodes. ils font deux classes en première classe pour la couleur et en deuxième classe pour le réglage de la largeur, de la hauteur, du style de police, etc. Lorsque nous combinons les deux classes, la première classe et la deuxième 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; } 
 
orderlist
 .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; } 
 
orderlist