Element nach mehreren Klassen auswählen

Question

Ich habe eine Stilregel, die ich auf ein Tag anwenden möchte, wenn es den Wert zwei Klassen. Gibt es eine Möglichkeit, dies ohne JavaScript durchzuführen? Mit anderen Worten:

<li class="left ui-class-selector">

Ich möchte meine Stilregel anwenden sólo wenn die li hat sowohl .left y .ui-class-selector Klassen angewandt.

Answer 1

Sie meinen zwei Klassen? "Verketten Sie die Selektoren (keine Leerzeichen zwischen ihnen):

.class1.class2 {
    /* style here */
}

Dies selektiert alle Elemente mit class1 die auch über class2 .

In Ihrem Fall:

li.left.ui-class-selector {

}

Offizielle Dokumentation : CSS2-Klassenselektoren .

---

Als akamike auf ein Problem mit dieser Methode im Internet Explorer 6 hinweist, sollten Sie dies lesen: Doppelte Klassen in IE6-CSS verwenden?

Answer 2

Kettenselektoren sind nicht nur auf Klassen beschränkt, sondern können sowohl für Klassen als auch für IDs verwendet werden.

Klassen

.classA.classB {
/*style here*/
}

Klasse & Kennung

.classA#idB {
/*style here*/
}

Id & Id

#idA#idB {
/*style here*/
}

Alle aktuellen Browser unterstützen dies, mit Ausnahme des IE 6, der die Auswahl anhand des letzten Selektors in der Liste trifft. So wird ".classA.classB" nur auf der Grundlage von ".classB" ausgewählt.

Für Ihren Fall

li.left.ui-class-selector {
/*style here*/
}

ou

.left.ui-class-selector {
/*style here*/
}

Answer 3

Sie können diese Lösungen verwenden:

Die CSS-Regeln gelten für alle Tags, die folgende zwei Klassen haben:

.left.ui-class-selector {
    /*style here*/
}

CSS-Regeln gelten für alle Tags, die den <li> mit den folgenden zwei Klassen:

li.left.ui-class-selector {
   /*style here*/
}

jQuery-Lösung :

$("li.left.ui-class-selector").css("color", "red");

Javascript-Lösung :

document.querySelector("li.left.ui-class-selector").style.color = "red";