Дочерним называется
элемент, который непосредственно располагается внутри родительского
элемента. Чтобы лучше понять отношения между элементами документа,
разберем небольшой код (пример ниже).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<div class="main">
<p><em>Lorem ipsum dolor sit amet</em>,
consectetuer adipiscing elit, sed diem nonummy nibh euismod
tincidunt ut lacreet dolore magna aliguam erat volutpat. </p>
<p><strong><em>Ut wisis enim ad minim veniam</em></strong>,
quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
В данном примере применяется несколько
контейнеров, которые в коде располагаются один в другом.
Дочерним селектором считается такой,
который в дереве элементов находится прямо внутри родительского
элемента. Синтаксис применения таких селекторов следующий.
Селектор 1 > Селектор 2 { Описание правил стиля }
Стиль применяется к Селектору 2,
но только в том случае, если он является дочерним для Селектора
1.
Дочерние
селекторы не поддерживаются браузером Internet Explorer.
По своей логике дочерние селекторы
похожи на селекторы контекстные. Разница между ними следующая.
Стиль к дочернему селектору применяется только в том случае,
когда он является прямым потомком, иными словами, непосредственно
располагается внутри родительского элемента. Для контекстного
селектора допустим любой уровень вложенности. Чтобы стало
понятно, о чем идет речь, разберем следующий код (пример ниже).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Дочерние селекторы</title>
<style type="text/css">
DIV I { /* Контекстный селектор */
color: green; /* Зеленый цвет текста */
}
DIV > I { /* Дочерний селектор */
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<div>
<p><i>Lorem ipsum dolor sit amet</i>, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut
lacreet dolore magna aliguam erat volutpat.</p>
</div>
<div>
<p><i>Lorem ipsum dolor sit amet</i>, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut
lacreet dolore magna aliguam erat volutpat.</p>
</div>
</body>
</html>
В данном примере курсивный текст
будет отображаться зеленым цветом из-за того, что дочерний
селектор указан некорректно. В стиле прописано изменить цвет
текста на красный у содержимого тега <I>, но только
в том случае, если он непосредственно находится внутри <DIV>.
А в нашем случае тег <I> располагается внутри <P>,
поэтому стиль применяться не будет. Зато будет действовать
контекстный селектор, который и задает зеленый цвет.
Заметим, что в большинстве
случаев от добавления дочерних селекторов можно отказаться,
заменив их контекстными селекторами. Однако использование
дочерних селекторов расширяет возможности по управлению стилями
элементов, что в итоге позволяет получить нужный результат,
а также простой и наглядный код.
Удобнее всего применять указанные
селекторы для элементов, которые обладают иерархической структурой
— сюда относятся, например, таблицы и разные списки. В примере
ниже показано изменение вида списка с помощью стилей. За счет
вложения одного списка в другой получаем разновидность меню.
Заголовки при этом располагаются горизонтально, а набор ссылок
— вертикально под заголовками. Для размещения текста по горизонтали
к селектору LI добавляется стилевой атрибут float. Чтобы при
этом разделить между собой стиль горизонтального и вертикального
списка и применяются дочерние селекторы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Дочерние селекторы</title>
<style type="text/css">
UL#menu > LI {
list-style: none; /* Убираем маркеры списка */
width: 120px; /* Ширина элемента в пикселах */
background: #ddd; /* Цвет фона */
color: maroon; /* Цвет текста */
padding: 5px; /* Поля вокруг текста */
font-family: Arial, sans-serif; /* Рубленый шрифт */
font-size: 90%; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
float: left; /* Располагаем элементы по горизонтали */
}
LI > UL {
list-style: none; /* Убираем маркеры списка */
padding: 0px; /* Убираем отступы вокруг элементов списка */
padding-top: 5px; /* Добавляем отступ сверху */
}
LI > A {
display: block; /* Ссылки отображаются в виде блока */
font-weight: normal; /* Нормальное начертание текста */
font-size: 90%; /* Размер шрифта */
background: #fff; /* Цвет фона */
border: 1px solid #666; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<ul id="menu">
<li>Редактор</li>
<li>Правка
<ul>
<li><a href="undo.html">Отменить</a></li>
<li><a href="cut.html">Вырезать</a></li>
<li><a href="copy.html">Копировать</a></li>
<li><a href="paste.html">Вставить</a></li>
</ul>
</li>
<li>Начертание
<ul>
<li><a href="bold.html">Жирное</a></li>
<li><a href="italic.html">Курсивное</a></li>
<li><a href="emphasis.html">Приятное</a></li>
</ul>
</li>
<li>Размер
<ul>
<li><a href="small.html">Так себе</a></li>
<li><a href="normal.html">Нормальный</a></li>
<li><a href="middle.html">Средний</a></li>
<li><a href="big.html">Недетский</a></li>
</ul>
</li>
</ul>
</body>
</html>
|
