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

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

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

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

Ответы на вопрос(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 имеет несколько классов, они разделяются пробелами.)

 23 окт. 2016 г., 17:44
Показ неудачного случая полезен.

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

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

 14 июл. 2009 г., 18:02
-1 за грубость.
 14 июл. 2009 г., 17:58
Это то, что я подозревал. Знаете ли вы, правильно ли IE6 обрабатывает .classA .classB (с пробелом)?
 14 июл. 2009 г., 17:59
Я рад, что ты это прибил. Это часто неправильно понимают. Как вы упомянули, они имеют 2 совершенно разных значения.
 14 июл. 2009 г., 17:59
@retrohound Только что попробовал - IE6 правильно обрабатывает оба случая (с пробелом и без)
 14 июл. 2009 г., 17:58
Правильный! Это верно в Chrome, IE и amp; Fire Fox.

Ваш ответ на вопрос