Понимание более сложных примеров порожденных селекторов
Я несколько понимаю порожденные селекторы, но более сложные примеры дают мне проблему. Например:
#content .alternative p
Если это правило относится к p элементам, которые являются потомками элементов E, где E:
- потомки элемента
#content и - также члены класса
.alternative
Или должен управлять, относятся p элементы, которые являются:
- потомки элемента
#content - и также члены класса
.alternative?
Как насчет следующего правила?
#content .alternative .alternative1 p
4 ответа
Самым правильным компонентом селектора является та часть, которая фактически выбирает элемент. Пробел - это селектор по нисходящей. Если пробела нет, то все селекторы применяются к одному элементу.
#content .alternative p
p элемент, содержащийся в элементе класса alternative, содержащемся в элементе id content.
#content .alternative .alternative1 p
p элемент, содержащийся в элементе класса alternative1, содержащемся в элементе класса alternative1, содержащемся в элементе id content.
#content p.alternative.alternative1
p элемент класса alternative1 и альтернативного класса, содержащегося в элементе id content.
Каждый раздел спецификатора, разделенный пробелом, относится к отдельному узлу в документе. Итак, это первая.
Первое - правильное описание. Ваша вторая интерпретация будет записана в CSS как:
#content p.alternative
Поскольку .alternative прикреплен к p в этой версии, это квалификатор, а не указание потомка. Если вы вместо этого напишете его как
#content p .alternative
, это будет означать элементы класса .alternative , которые являются потомками элементов p , которые являются потомками элемента #content .
О первом вопросе: относится к элементам p, которые являются элементами: потомки элемента #content , а также потомки элементов с классом .alternative
Второй такой же, только с дополнительным уровнем глубины.
Проверьте по этой ссылке для получения более подробной информации о селекторах
.