Come applicare due classi CSS a un singolo div/span

Question

Posso applicare 2 classi a un singolo div o span o qualsiasi elemento html? Ad 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?

Answer 1

1) Usare più classi all'interno dell'attributo classe, separate da spazi bianchi (ref):

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

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

.c1.c2 { 
} 

Answer 2

includere sia stringhe di classe in un unico valore di attributo di classe, con uno spazio in mezzo.

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

Answer 3

Come altri hanno sottolineato, è sufficiente delimitarli con uno spazio.

Tuttavia, è utile anche sapere come funzionano i selettori.

Considerate questo pezzo di codice HTML ...

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

Utilizzando .a { ... } come un selettore si seleziona la prima e la terza. Tuttavia, se si desidera selezionarne uno che sia sia a sia , è possibile utilizzare il selettore .a.b { ... }. Si noti che questo non funzionerà in IE6, sarà semplicemente selezionare .b (l'ultimo).

Answer 4

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

Answer 5

Questo è molto chiaro che per aggiungere due classi in div singolo, prima è necessario generare le classi e quindi combinarle. Questo processo viene utilizzato per apportare modifiche e ridurre il no. di classi. Coloro che creano da zero il sito Web hanno utilizzato principalmente questo tipo di metodi. fanno due classi prima classe è per colore e seconda classe è per impostare larghezza, altezza, stile carattere, ecc. Quando combiniamo entrambe le classi, allora la prima e la seconda classe sono entrambe nell'effetto .

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

Answer 6

Separare 'em con uno spazio.

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

Answer 7

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

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

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