¿Qué significa un espacio en un selector de CSS? es decir, ¿cuál es la diferencia entre .classA.classB y .classA .classB?

¿Cuál es la diferencia entre estos dos selectores?

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

.classA.classB refiere a un elemento que tiene las dos clases A y B ( class="classA classB" ); mientras que .classA .classB refiere a un elemento con class="classB" desciende de un elemento con class="classA" .

Editar: Especificación para referencia: Selectores de atributos (Ver sección 5.8.3 Selectores de clase)

Un estilo como este es mucho más común, y apuntaría a cualquier tipo de elemento de clase “clase B” que esté nested dentro de cualquier tipo de elemento de clase “clase A”.

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

Funcionaría, por ejemplo, en:

 

asdf

Este, sin embargo, se dirige a cualquier tipo de elemento que sea de la clase “classA”, así como de la clase “classB”. Este tipo de estilo se ve con menos frecuencia, pero sigue siendo útil en algunas circunstancias.

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

Esto se aplicaría a este ejemplo:

 

asdf

Sin embargo, no tendría ningún efecto sobre lo siguiente:

 

fail

fail

(Tenga en cuenta que cuando un elemento HTML tiene múltiples clases, están separados por espacios).