Cosa significa uno spazio in un selettore CSS? cioè 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.classB riferisce ad un elemento che ha entrambe le classi A e B ( class="classA classB" ); mentre .classA .classB riferisce ad un elemento con class="classB" discendente da un elemento con class="classA" .

Modifica: Spec per riferimento: selettori di attributi (vedere la sezione 5.8.3 Selettori di class)

Uno stile come questo è molto più comune e si rivolgerebbe a qualunque tipo di elemento di class “classB” che sia annidato all’interno di qualsiasi tipo di elemento di class “classA”.

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

Funzionerebbe, ad esempio, su:

 

asdf

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

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

Questo si applicherebbe a questo esempio:

 

asdf

Tuttavia, non avrebbe alcun effetto su quanto segue:

 

fail

fail

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