Was ist der Unterschied zwischen diesen beiden Selektoren?
.classA.classB {
border: 1px solid;
}
.classA .classB {
border: 1px solid;
}
quelle
Was ist der Unterschied zwischen diesen beiden Selektoren?
.classA.classB {
border: 1px solid;
}
.classA .classB {
border: 1px solid;
}
.classA.classB
bezieht sich auf ein Element, das beide Klassen A und B ( class="classA classB"
) hat; wohingegen .classA .classB
sich auf ein Element bezieht, das von einem Element mit class="classB"
abstammt class="classA"
.
Bearbeiten: Spezifikation als Referenz: Attributselektoren (siehe Abschnitt 5.8.3 Klassenselektoren)
Ein solcher Stil ist weitaus häufiger und würde auf jeden Elementtyp der Klasse "classB" abzielen, der in einem Elementtyp der Klasse "classA" verschachtelt ist.
.classA .classB {
border: 1px solid; }
Es würde zum Beispiel funktionieren bei:
<div class="classA">
<p class="classB">asdf</p>
</div>
Dieses Element zielt jedoch auf alle Arten von Elementen ab, die sowohl die Klasse "classA" als auch die Klasse "classB" sind. Diese Art von Stil wird seltener gesehen, ist aber unter bestimmten Umständen immer noch nützlich.
.classA.classB {
border: 1px solid; }
Dies würde für dieses Beispiel gelten:
<p class="classA classB">asdf</p>
Dies hätte jedoch keine Auswirkungen auf Folgendes:
<p class="classA">fail</p>
<p class="classB">fail</p>
(Beachten Sie, dass ein HTML-Element mit mehreren Klassen durch Leerzeichen getrennt ist.)
.classA.classB
Dies bedeutet, dass die Elemente mit dem Namen beider Klassen ausgewählt werden, während.classA .classB
das Element mit dem KlassennamenclassB
innerhalbclassA
nur ausgewählt wird.quelle