it-swarm.com.ru

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

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

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

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

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

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

87
Williham Totland

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

30
T E

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

Читайте об этом в MDN или в спецификации CSS

0
elphe