CSS. Каскадные таблицы стилей. Подробное руководство.Символ-Плюс 2008

Бивалентны. Добавлять или опускать пробелы можно по собственному усмотрению.

При просмотре документа в виде древовидной структуры легко заметить, что селектор дочерних элементов ограничивает свои сопоставления только непосредственно соединенными друг с другом элементами. На рис. 2.18 показана часть дерева документа.

На этом фрагменте дерева можно без труда выделить родительско-до-черние отношения. Например, элемент а — родитель элемента strong, он же и дочерний элемент элемента р. Можно было бы сопоставить элементы этого фрагмента с селекторами р > а и а > strong, но не с селектором р > st rong, поскольку strong является потомком р, а не дочерним элементом.

Можно также составлять в одном и том же селекторе комбинации потомков и дочерних элементов. Так, селектор table, summary td > р будет выбирать любой элемент р, являющийся дочерним элементом td, происходящего от элемента table, с атрибутом class, значение которого равно summa гу.

Рис. 2.18. Фрагмент дерева документа

Выбор сестринских элементов

Скажем, требуется оформить абзац, находящийся в дереве документа на одном уровне с заголовком, или создать специальное обрамление для списка, стоящего на одном уровне с абзацем. Чтобы выбрать элемент, расположенный на одном уровне с другим элементом и имеющий того же родителя, применяется комбинатор селектора сестринских элементов (adjacent-sibling combinatory представляемый в виде знака плюс (+). Как и комбинатор селектора дочерних элементов, этот символ может быть окружен пробелами по усмотрению автора.

Чтобы удалить верхний отступ абзаца, непосредственно следующего за элементом hi, запишем:

hi + р {margin-top:0;}

Этот селектор означает следующее:«выбираем любой абзац, расположенный непосредственно за элементом hi, имеющим общих родителей с элементом р».

Наглядно представить себе, как работает этот селектор, проще всего, еще раз рассмотрев фрагмент дорона документа (рис. 2.19).