Jak zastosować dwie klasy CSS do pojedynczego div/span?

Question

Czy mogę zastosować 2 klasy do pojedynczego elementu div lub span lub dowolnego elementu html? Na przykład:

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

Próbowałem iw moim przypadku c2 nie zostanie zastosowany. Jak mogę zastosować obie klasy jednocześnie?

Answer 1

1) Zastosowanie wielu klas wewnątrz atrybutem klasy oddzielonych odstępami (ref):

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

2) obejmuje elementy, które posiadają wszystkie z wymienionych klas, ten przełącznik CSS (ma miejsca) (ref):

.c1.c2 { 
} 

Answer 2

Dołącz oba ciągi klas w jednej wartości atrybutu class, z przestrzeni pomiędzy.

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

Answer 3

Jak inni podkreślili, po prostu ogranicz je spacją.

Jednak wiedza na temat działania selektorów jest również przydatna.

Rozważmy ten kawałek HTML ...

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

Korzystanie .a { ... } jako selektor wybierze pierwszą i trzecią. Jeśli jednak chcesz wybrać taki, który ma zarówno a, jak i b, możesz użyć selektora .a.b { ... }. Zauważ, że to nie zadziała w IE6, po prostu wybierze .b (ostatni).

Answer 4

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

Answer 5

Jest to bardzo jasne, że aby dodać dwie klasy w jednym div, najpierw trzeba wygenerować klasy, a następnie połączyć je. Ten proces służy do wprowadzania zmian i zmniejszania liczby braków. klas. Ci, którzy tworzą witrynę od zera, najczęściej stosowali tego typu metody. tworzą dwie klasy pierwsza klasa dla koloru, a druga klasa dla ustawienia szerokości, wysokości, stylu czcionki itp. Kiedy połączymy obie klasy, wtedy pierwsza klasa i druga klasa są w jednym efekcie .

.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

Oddzielić „em z kosmosu.

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