Como aplicar duas classes CSS a um único elemento

Posso aplicar 2 classes a um único div ou span ou qualquer elemento html? Por exemplo:

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

Eu tentei e no meu caso c2 não foi aplicado. Como posso aplicar as duas classes ao mesmo tempo?

1) Use várias classes dentro do atributo de classe, separadas por espaço em branco ( ref ):

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

2) Para direcionar elementos que contêm todas as classes especificadas, use este seletor CSS ( sem espaço ) ( ref ):

.c1.c2 {
}

Inclua ambas as strings de classe em um único valor de atributo de classe, com um espaço no meio.

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

Como outros apontaram, você simplesmente os delimita com um espaço.

No entanto, saber como os seletores funcionam também é útil.

Considere este pedaço de HTML ...

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

Usar .a { ... }como seletor selecionará o primeiro e o terceiro. No entanto, se quiser selecionar um que tenha ae b, você pode usar o seletor .a.b { ... }. Observe que isso não funcionará no IE6, ele simplesmente selecionará .b(o último).

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

É muito claro que, para adicionar duas classes em uma única div, primeiro você deve gerar as classes e depois combiná-las. Este processo é usado para fazer alterações e reduzir o não. das aulas. Quem faz o site do zero costuma usar esse tipo de método. eles fazem duas classes, a primeira classe é para cores e a segunda classe é para definir largura, altura, estilo de fonte, etc. Quando combinamos ambas as classes, a primeira classe e a segunda classe estão em vigor.

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

Separe-os com um espaço.

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