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

Question 1

В чем разница между этими двумя селекторами?

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

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

Question 2

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

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

Question 3

Такой стиль гораздо более распространен и нацелен на любой тип элемента класса «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 имеет несколько классов, они разделяются пробелами.)

Question 4

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