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

4

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

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

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

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

Зачем?

Я не совсем положительный, но «второе среднее» не относится к LI и к любому элементу, чей класс «выделен». Первый из них означает «применять к элементам LI с классом, установленным в« highlight ».» Michael Todd

Ваш Ответ

7   ответов
10

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

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 */

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

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

Да, ваш комментарий для второго селектора неверен. & GT; выбирает детей (или потомков), а & quot; & Quot; считает всех потомков. -1
Я не уверен, что вы имеете в виду под "непосредственным потомком" но & lt; li .highlight & quot; выбирает элементы с классом «подсветка» содержится в элементе li; & lt; li & gt; Выделите & Quot; будет синтаксис для выбора только непосредственных детей.w3.org/TR/CSS2/selector.html#selector-syntax
+1 и спасибо, Нил, я исправил ответ. Если бы кто-нибудь еще мог присоединиться ко мне в голосовании за ответ Нейла, это был бы туз. знак равно
1

бираете descandant of li, где потомок имеет выделение класса.

2

чтобы найти подходящие теги, поэтому:

li.highlight Means Find any list item with the class name highlight and apply this style li .highlight Means Find any element with the class name highlight, who's ancestor is a list item, and apply this style
2

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

3

<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>
1

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

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

2

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

li.highlight matches an li element with a class of highlight: <li class="highlight">. li .highlight with a space matches an element with class highlight which is inside of an li (a descendant): for example, the span in <li><strong>OMG <span class="highlight">NO WAY!</span></li>

Похожие вопросы