Понимание более сложных примеров потомков селекторов

Question

Я немного понимаю селекторы потомков, но более сложные примеры доставляют мне неприятности. Например:

#content .alternative p

Должно ли это правило применяться к p элементам, которые являются потомками элементов E, где E:

• потомки элемента #conten т и
• также являются членами класса .alternative

Или правило должно применяться к p элементам, которые:

• потомки элемента #content
• , а также являются ли членами класса .alternative?

Как насчет следующего правила?

#content .alternative .alternative1 p

Answer 1

О первом вопросе: относится к p элементам, которые: потомки элемента #content , а также потомки элементов с классом .alternative

Второй такой же, только с дополнительным уровнем глубины.

Проверьте эту ссылку для получения дополнительной информации о селекторах

Answer 2

Самый правый компонент селектора - это та часть, которая на самом деле выбирает элемент. Пробел является потомком селектора. Если пробела нет, все селекторы применяются к одному элементу.

#content .alternative p

p элемент, содержащийся в элементе альтернативы класса, который содержится в элементе идентификатора содержимого.

#content .alternative .alternative1 p

p элемент, содержащийся в элементе класса alternative1, который содержится в элементе класса альтернатива, содержащемся в элементе содержимого id.

#content p.alternative.alternative1

p элемент класса alternative1 и класса alternative, содержащийся в элементе идентификатора содержимого.

Answer 3

Первое - правильное описание. Ваша вторая интерпретация будет написана в CSS как:

#content p.alternative

Поскольку .alternative присоединен к p в этой версии, он является классификатором, а не указанием потомка. Если вы вместо этого напишите это как

#content p .alternative

это будет означать элементы класса .alternative, которые являются потомками p элементов, которые являются потомками элемента #content.

Answer 4

Каждый раздел спецификатора, разделенный пробелом, относится к отдельному узлу в документе. Так что это первый.