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

103

Was ist der Unterschied zwischen diesen beiden Selektoren?

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

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

Antworten:

103

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

Williham Totland
quelle
42

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


quelle
1
Das Anzeigen des fehlgeschlagenen Falls ist hilfreich.
Hal50000
0

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

Amarnath Vishwakarma
quelle
1
Dies ist richtig, aber die Frage wurde bereits vor einem Jahrzehnt richtig beantwortet. es brauchte keine neue Antwort.
Brilliand