Was bedeutet ein Leerzeichen in einem CSS-Selektor? dh Was ist der Unterschied zwischen .classA.classB und .classA .classB?

Was ist der Unterschied zwischen diesen beiden Selektoren?

.classA.classB {
  border: 1px solid;
}

.classA .classB {
  border: 1px solid;
}

.classA.classBbezieht sich auf ein Element, das beide Klassen A und B ( class="classA classB") hat; wohingegen .classA .classBsich 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.classBDies bedeutet, dass die Elemente mit dem Namen beider Klassen ausgewählt werden, während .classA .classBdas Element mit dem Klassennamen classBinnerhalb classAnur ausgewählt wird.