So wenden Sie zwei CSS-Klassen auf ein einzelnes Element an

Kann ich 2 Klassen auf ein einzelnes div oder span oder ein beliebiges HTML-Element anwenden? Beispielsweise:

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

Ich habe es versucht und in meinem Fall wird c2 nicht angewendet. Wie kann ich beide Klassen gleichzeitig anwenden?

1) Verwenden Sie mehrere Klassen innerhalb des Klassenattributs, getrennt durch Leerzeichen ( ref ):

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

2) Verwenden Sie diesen CSS-Selektor ( kein Leerzeichen ) ( ref ) , um auf Elemente abzuzielen, die alle angegebenen Klassen enthalten :

.c1.c2 {
}

Fügen Sie beide Klassenzeichenfolgen in einen einzelnen Klassenattributwert mit einem Leerzeichen dazwischen ein.

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

Wie andere bereits betont haben, begrenzen Sie sie einfach mit einem Leerzeichen.

Es ist jedoch auch nützlich zu wissen, wie die Selektoren funktionieren.

Betrachten Sie dieses Stück HTML ...

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

Bei Verwendung .a { ... }als Selektor werden der erste und der dritte ausgewählt. Wenn Sie jedoch eine auswählen möchten, die beide aund enthält b, können Sie den Selektor verwenden .a.b { ... }. Beachten Sie, dass dies in IE6 nicht funktioniert. Es wird einfach .b(der letzte) ausgewählt.

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

Dies ist sehr klar, dass Sie zum Hinzufügen von zwei Klassen in einem einzelnen Div zuerst die Klassen generieren und dann kombinieren müssen. Dieser Prozess wird verwendet, um Änderungen vorzunehmen und die Nr. Zu reduzieren. von Klassen. Diejenigen, die die Website von Grund auf neu erstellen, verwendeten meistens diese Art von Methoden. Sie bilden zwei Klassen. Die erste Klasse ist für Farbe und die zweite Klasse für die Einstellung von Breite, Höhe, Schriftstil usw. Wenn wir beide Klassen kombinieren, sind sowohl die erste als auch die zweite Klasse wirksam.

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

Trenne sie mit einem Leerzeichen.

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