¿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.classBse refiere a un elemento que tiene ambas clases A y B ( class="classA classB"); mientras que se .classA .classBrefiere a un elemento con class="classB"descendiente de un elemento con class="classA".

Editar: Especificación para referencia: selectores de atributos (consulte la 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 "classB" que esté anidado dentro de cualquier tipo de elemento de clase "classA".

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

Funcionaría, por ejemplo, en:

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

Este, sin embargo, apunta a cualquier tipo de elemento que sea tanto de clase "classA" como de 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:

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

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

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

(Tenga en cuenta que cuando un elemento HTML tiene varias clases, están separadas por espacios).

.classA.classBsignifica que se seleccionarán los elementos con el nombre de ambas clases, mientras .classA .classBque significa que sólo se seleccionará el elemento con el nombre de la clase classBdentro de él classA.