Какая разница в таких классах с таргетингом на css?

Question

Допустим, я хочу нацелить элемент класса span:

Если мне это нравится, это не имеет никакого эффекта:

ul#sponsors li span .spanelement {
}

Но если я сделаю так:

ul#sponsors li span.spanelement {
}

Это работает. Какая здесь разница?

Answer 1

Вот этот:

ul#sponsors li span .spanelement { }

соответствует любому элементу с class="spanelement", но он должен находиться внутри диапазона (который находится внутри li внутри ul с id = "спонсоры").

Вот этот:

ul#sponsors li span.spanelement { }

соответствует самому <span class="spanelement"> (при условии, что оно внутри li внутри ul с id = "спонсоры").

Answer 2

Ваш второй пример не имеет пробела между span и spanelement.Поэтому этот оператор селектора CSS нацелен на диапазон с классом "spanelement".

Пример:

<span class="spanelement">

Добавление пробела изменяет селектор так, что он выбирает все тегис spanelement классом ВНУТРИ диапазон.

Пример:

<span>
<spanelement\>
</span>

Answer 3

первый выбирает элемент с классом spanelement внутри ваших span с, второй выбирает span с классом spanelement

, поэтому первое совпадет с <p> здесь, а второе с самим диапазоном:

<ul id="sponsors"><li><span class="spanelement"><p class="spanelement">SOMETHING</p></span></li>/<ul>

если внутри диапазона нет ничего или элементы внутри не имеют класса spanelement, то первый запрос ничего не будет соответствовать