Come applicare due classi CSS a un singolo elemento

Posso applicare 2 classi a un singolo div o span o qualsiasi elemento html? Per esempio:

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

Ho provato e nel mio caso c2 non viene applicato. Come posso applicare entrambe le classi contemporaneamente?

1) Usa più classi all'interno dell'attributo class, separate da spazi ( ref ):

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

2) Per indirizzare gli elementi che contengono tutte le classi specificate, usa questo selettore CSS ( senza spazio ) ( ref ):

.c1.c2 {
}

Includere entrambe le stringhe di classe in un singolo valore di attributo di classe, con uno spazio in mezzo.

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

Come altri hanno sottolineato, li delimiti semplicemente con uno spazio.

Tuttavia, è utile anche sapere come funzionano i selettori.

Considera questo pezzo di HTML ...

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

L'utilizzo .a { ... }come selettore selezionerà il primo e il terzo. Tuttavia, se si desidera selezionarne uno che abbia sia ae b, è possibile utilizzare il selettore .a.b { ... }. Nota che questo non funzionerà in IE6, selezionerà semplicemente .b(l'ultimo).

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

Questo è molto chiaro che per aggiungere due classi in un singolo div, devi prima generare le classi e poi combinarle. Questo processo viene utilizzato per apportare modifiche e ridurre il n. di classi. Coloro che creano il sito web da zero hanno utilizzato principalmente questo tipo di metodi. fanno due classi la prima classe è per il colore e la seconda classe è per impostare larghezza, altezza, stile dei caratteri, ecc. Quando combiniamo entrambe le classi, la prima e la seconda classe sono entrambe attive.

.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>

Separali con uno spazio.

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