Что означает пробел в селекторе CSS? В чем разница между .classA.classB и .classA.classB?

Ответ 1

.classA.classB относится к элементу, который имеет оба класса A и B (class="classA classB"); тогда как .classA .classB относится к элементу с class="classB", сгенерированным из элемента с class="classA".

Изменить: Spec для справки: Селекторы атрибутов (см. раздел 5.8.3 Селекторы классов)

Ответ 2

Такой стиль гораздо более распространен и будет нацелен на любой тип элемента класса "classB", который вложен внутри любого типа элемента класса "classA".

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

Это будет работать, например, на:

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

Этот, однако, нацелен на любой тип элемента, который является как классом "classA", так и классом "classB". Этот тип стиля реже встречается, но при этом в любом случае полезен.

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

Это применимо к этому примеру:

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

Однако это не повлияет на следующее:

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

(Обратите внимание, что когда элемент HTML имеет несколько классов, они разделяются пробелами.)

Ответ 3

.classA.classB означает, что будут выбраны элементы с именами обоих классов, тогда как .classA .classB означает, что будет выбран только элемент с именем класса classB внутри classA.

Ответ 4

Он официально известен как "потомок комбинатор".

Прочтите об этом в MDN или в спецификации CSS