Что означает пробел в селекторе 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 имеет несколько классов, они разделяются пробелами.)
.classA.classB относится к элементу, который имеет оба класса A и B (class="classA classB"); в то время как.classA .classB относится к элементу сclass="classB" произошел от элемента сclass="classA".
Редактировать: Спецификация для справки:Селекторы атрибутов (См. Раздел 5.8.3 Выбор класса)