когда оставить пространство, когда не в CSS?

Question

Это нормально (без пробела):

li.highlight{
    background:#FF9900 none repeat scroll 0 0;
}

Это не будет работать (с пробелом):

li .highlight{
    background:#FF9900 none repeat scroll 0 0;
}

Почему?

Answer 1

Последний селектор не будет работать, потому что пробел подразумевает связь (в данном случае потомок) между селекторами.

li.highlight /* defines an element of 'li' with a classname of 'highlight' */

li .highlight /* defines an element of class 'highlight' that's contained within an li element */

li > .highlight /* as pointed out by Neil (in comments), this would select an element of class highlight that is an immediate child/descendant of an li */

Я должен объяснить, как я использую фразу "не сработает". Очевидно, я использовал вашу фразу, и я сделал это по ошибке.

Это будет работать, просто он выберет - как объяснено в комментарии - элемент, которого у вас нет в разметке.

Answer 2

Первый пример:

<li class="highlight">this will be highlighted</li>

Второй пример:

<li class="highlight">
    <span class="highlight">this will be higlighted</span>
    <span>this won't be.</span>
</li>

Answer 3

Вы можете думать о li .highlight как о подразумеваемом * в нем. Это эквивалентно li *.highlight.

• li.highlight соответствует элементу li с классом highlight: <li class="highlight">.
• li .highlight с пробелом соответствует элементу с классом highlight, который находится внутри li (потомок): например, span в <li><strong>OMG <span class="highlight">NO WAY!</span></li>

Answer 4

интервал предназначен для вызова различных элементов, а не элементов, связанных с одним элементом. например .highlight не является отдельным элементом. При вызове div table все отдельные элементы

Answer 5

Поскольку пробел (в селекторе) означает спуск по DOM, чтобы найти подходящие теги, поэтому:

• li.highlight
  • Значит Найдите любой элемент списка с именем класса , выделите и примените этот стиль
• li .highlight
  • Значит Найдите любой элемент с подсветкой имени класса , предком которого является элемент списка , и примените этот стиль

Answer 6

В первом случае вы выбираете все теги li с классом «highlight». Во втором случае вы выбираете дочерние теги li с классом «highlight».

Вы должны прочитать CSS-селекторы в спецификации W3C .

Answer 7

Без пробела вы выбираете li с подсветкой класса. С помощью sapce вы выбираете дескандант li, у которого потомок имеет выделение класса.