Cosa significa uno spazio in un selettore CSS? ie Qual è la differenza tra .classA.classB e .classA .classB?

Qual è la differenza tra questi due selettori?

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

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

.classA.classBsi riferisce a un elemento che ha entrambe le classi A e B ( class="classA classB"); mentre si .classA .classBriferisce a un elemento con class="classB"discendente da un elemento con class="classA".

Modifica: specifica per riferimento: selettori di attributi (vedere la sezione 5.8.3 Selettori di classe)

Uno stile come questo è molto più comune e mira a qualsiasi tipo di elemento della classe "classB" annidato all'interno di qualsiasi tipo di elemento della classe "classA".

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

Funzionerebbe, ad esempio, su:

<div class="classA">
  <p class="classB">asdf</p>
</div>

Questo, tuttavia, si rivolge a qualsiasi tipo di elemento che sia sia la classe "classA", sia la classe "classB". Questo tipo di stile è visto meno frequentemente, ma comunque utile in alcune circostanze.

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

Ciò si applicherebbe a questo esempio:

<p class="classA classB">asdf</p>

Tuttavia, non avrebbe alcun effetto su quanto segue:

<p class="classA">fail</p>
<p class="classB">fail</p>

(Nota che quando un elemento HTML ha più classi, sono separate da spazi.)

.classA.classBsignifica che verranno selezionati gli elementi con nome di entrambe le classi mentre verrà selezionato solo .classA .classBl'elemento con nome di classe classBall'interno di classA.