2014-02-10
2579
В спецификации CSS2 определены следующие виды составных селекторов, элементами которых являются простые селекторы:
· список селекторов;
· селекторы дочерних элементов;
· селекторы потомков;
· селекторы родственных элементов
· селекторы соседних элементов.
Если все свойства или часть свойств для некоторых селекторов совпадают, можно задать для них одно правило, в котором в качестве селектора задается список селекторов, элементы которого отделяются друг от друга запятой.
Пример 4.3.28. Задание списка селекторов для следующих правил:
h1 {color: red}
h2 {color: red}
h3 {color: red}
Эти правила можно задать в виде одного правила со списком селекторов
h1, h2, h3 {color: red}.
Тогда фрагмент документа HTML
<h1>Часть 1</h1>
<h2>Раздел 1</h2>
<h2>Глава 1</h2>
будет выведен на Web-странице следующим образом:
|
Селекторы дочерних элементов, потомков и соседних элементов связаны с иерархическим представлением документа HTML и их можно назвать селекторами иерархии.
Как было показано выше, структуру документа HTML можно представить в виде дерева (иерархической структуры). Так, для следующего фрагмента:
<body>
<h1>Примеры составных селекторов</h1>
<h2 id="h21">Пример селектора дочерних элементов</h2>
<div id="div1" class="child">
Ниже следует <span id="sp10">два</span> абзаца:
<p id="p1">Абзац <span id="sp11">1</span>.</p>
<p id="p2">Абзац <span id="sp12">2</span>.</p>
</div>
<h2 id="h22">Пример селектора потомков</h2>
<div id="div2" class="descendant">
Ниже следует <span id="sp20">еще два</span> абзаца:
<p id="p3">Абзац <span id="sp21">3</span>.</p>
<p id="p4">Абзац <span id="sp22">4</span>.</p>
</div>
</body>
иерархическая структура представлена на рис. 4.3.3 (текстовые элементы на рисунке не показаны).
Рис. 4.3.3. Пример структуры документа HTML
В отношении элементов структуры документа HTML используется следующая терминология:
· элемент называется дочерним элементом другого элемента, если он непосредственно вложен в контейнер этого элемента;
· элемент называется родительским элементом другого элемента, если другой элемент непосредственно вложен в контейнер этого элемента;
· элемент называется потомком другого элемента, если либо он непосредственно вложен в контейнер этого элемента, либо вложен в контейнер дочернего элемента и т.д.;
· элемент называется предком другого элемента, если либо другой элемент непосредственно вложен в контейнер этого элемента, либо вложен в контейнер дочернего элемента и т.д.;
· элемент называется родственным другому элементу, если оба элемента имеют один и тот же родительский элемент;
· два родственных элемента называются соседними, если они расположены друг за другом.
Так, элемент span id="sp10", а также элементы p id="p1" и p id="p21" являются дочерними элементами родительского элемента div id="div1". Все эти элементы, а также элементы span id="sp11" и span id="sp12" являются потомками элемента-предка div id="div1". Элементы span id="sp10", p id="p1" и p id="p21" являются родственными друг другу, а пары элементов span id="sp10", p id="p1" и id="p1", p id="p21"являются соседними элементами.
Селектор дочерних элементов состоит из двух или более селекторов, разделенных символом ">", и определяет правило стилей для элемента, стоящего справа, только в том случае, если этот элемент является дочерним элементом элемента, стоящего слева.
Селектор потомков состоит из двух или более селекторов, разделенных пробелом, и определяет правило стилей для элемента, стоящего справа, только в том случае, если этот элемент является потомком элемента, стоящего слева.
Селектор родственных элементов состоит из двух или более селекторов, разделенных символом "~", и определяет правило стилей для элемента, стоящего справа, только в том случае, если этот элемент является родственным элементу, стоящего слева, причем элемент слева предшествует элементу справа, и эти два элемента не обязательно являются соседями.
Селектор соседних элементов состоит из двух селекторов, разделенных символом "+", и определяет правило стилей для двух соседних элементов только в том случае, если первый элемент непосредственно предшествует второму элементу.
Перед символами ">", пробела, "~" и "+", а также после этих символов допустимо любое количество пробельных символов.
Пример 4.3.29. Задание селекторов дочерних элементов, потомков, родственных и соседних элементов (для фрагмента, приведенного на рис. 4.3.3):
div.child > span {color:red}
div.descendant span {color:green}
h1,h2 {margin-top:50pt}
h1 ~ div:first-letter {font-size:16pt;
color:red;font-weight:bold}
h1 + h2 {margin-top:-10pt}
Вывод Web-страницы для заданного фрагмента документа HTML и заданных правил будет иметь следующий вид:
|
Первое правило действует только для дочернего элемента span id="sp10" элемента div id="div1", и только содержимое дочернего элемента ("два") выводится красным цветом.
Второе правило действует для всех потомков элемента div id="div2", поэтому содержимое элементов всех элементов span в этом элементе ("еще два", "1" и "2") будет выведено зеленым цветом.
Третье правило задает ширину 50pt для верхнего поля в элементах h1 и h2.
Четвертое правило задает вывод первой буквы в слове "Ниже" первого и второго элемента красным цветом, жирным шрифтом и размером 16 пунктов.
Пятое правило уменьшает ширину верхнего поля на 10pt в том случае, если элемент h2 следует за элементом h1. Это правило действует для элементов h1 и h2 id="h21", но не действует для элемента h2 id="h22", поскольку ему предшествует элемент div id="div1".
