Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберем небольшой код (пример 11.1). Пример 11.1. Вложенность элементов в документе <!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> В данном примере применяется несколько контейнеров, которые в коде располагаются один в другом. Нагляднее это видно на дереве элементов, так называется структура отношений всех тегов документа между собой (рис. 11.1). Рис. 11.1. Дерево элементов для примера 11.1 На рис. 11.1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу <DIV> выступает параграф <P>. Вместе с тем тег<STRONG> не является дочерним для тега <DIV>, поскольку он расположен в контейнере <P>. Вернемся теперь к селекторам. Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий. Селектор 1 > Селектор 2 { Описание правил стиля } Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1. Замечание Дочерние селекторы не поддерживаются браузером Internet Explorer. Если снова обратиться к примеру 11.1, то стиль вида P > EM { color: red } будет установлен для первого абзаца документа, поскольку тег <EM> находится внутри контейнера <P>, и не даст никакого результата для второго абзаца. А все из-за того, что тег <EM> во втором абзаце расположен в контейнере <STRONG>, поэтому нарушается условие вложенности. По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности. Чтобы стало понятно, о чем идет речь, разберем следующий код (пример 11.2). Пример 11.2. Контекстные и дочерние селекторы <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <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>, поэтому стиль применяться не будет. Зато будет действовать контекстный селектор, который и задает зеленый цвет. Заметим, что в большинстве случаев от добавления дочерних селекторов можно отказаться, заменив их контекстными селекторами. Однако использование дочерних селекторов расширяет возможности по управлению стилями элементов, что в итоге позволяет получить нужный результат, а также простой и наглядный код. Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой — сюда относятся, например, таблицы и разные списки. В примере 11.3 показано изменение вида списка с помощью стилей. За счет вложения одного списка в другой получаем разновидность меню. Заголовки при этом располагаются горизонтально, а набор ссылок — вертикально под заголовками (рис. 11.2). Рис. 11.2 Список в виде меню Для размещения текста по горизонтали к селектору LI добавляется стилевой атрибут float. Чтобы при этом разделить между собой стиль горизонтального и вертикального списка и применяются дочерние селекторы. Пример 11.3. Использование дочерних селекторов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <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>
|