Jak zastosować dwie klasy CSS do pojedynczego elementu

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

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

Spróbowałem iw moim przypadku c2 nie działa. Jak mogę zgłosić obie zajęcia jednocześnie?

1) Użyj wielu klas wewnątrz atrybutu klasy, oddzielonych białą spacją ( ref ):

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

2) Aby wskazać elementy, które zawierają wszystkie określone klasy, użyj tego selektora CSS ( bez spacji ) ( ref ):

.c1.c2 {
}

Uwzględnij oba ciągi klas w jednej wartości atrybutu klasy, z odstępem między nimi.

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

Jak zauważyli inni, po prostu ograniczasz je spacją.

Jednak znajomość sposobu działania selektorów jest również przydatna.

Rozważ ten fragment HTML ...

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

Użycie .a { ... }jako selektora spowoduje wybranie pierwszego i trzeciego. Jeśli jednak chcesz wybrać taki, który ma oba ai b, możesz użyć selektora .a.b { ... }. Zauważ, że to nie zadziała w IE6, po prostu wybierze .b(ostatni).

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

Jest to bardzo jasne, że aby dodać dwie klasy w jednym elemencie div, najpierw musisz wygenerować klasy, a następnie je połączyć. Ten proces służy do wprowadzania zmian i zmniejszania liczby nie. zajęć. Ci, którzy tworzyli stronę od podstaw, najczęściej stosowali tego typu metody. tworzą dwie klasy, pierwsza klasa jest przeznaczona do koloru, a druga do ustawiania szerokości, wysokości, stylu czcionki itp. Kiedy połączymy obie klasy, wtedy obowiązuje obie, pierwsza i druga.

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

Oddziel je spacją.

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