Использование структуры документа

Как я упоминал ранее, мощь CSS обусловлена тем, что для определения соответствующих стилей и их применения они используют структуру HTML-документов. Но это еще не все, так как подразумевается, что подобные определения – единственный вариант использования структуры документа в CSS. Структура играет намного большую роль в механизме применения стилей к документу. Итак, прежде чем перейти к более мощным формам выбора, немного остановимся на структуре.

Отношения родитель-потомок
Чтобы понять взаимоотношения между селекторами и документами, надо еще раз вспомнить, как структурирован документ. Рассмотрим очень простой HTML-документ:



Meerkat Central


Meerkat Central



Welcome to Meerkat Central, the best meerkat web site
on (a href="inet.html")the entire Internet(/a)
!



  • We offer:

    • Detailed information on how to adopt a meerkat

    • Tips for living with a meerkat

    • Fun things to do with a meerkat, including:

      1. Playing fetch

      2. Digging for food

      3. Hide and seek





  • ...and so much more!



Questions? (a href="mailto:suricate@meerkat.web")Contact us!(/a)





Мощь CSS в основном базируется на родительско-дочерних отношениях (parent–child relationship) элементов.


HTML-документы (фактически самые структурированные документы из всех) строятся на основании иерархии элементов, которую можно показать в форме древовидного представления документа. В этой иерархии каждый элемент тем или иным образом вписывается в общую структуру документа. Каждый элемент является или родительским (parent), или дочерним (child) элементом другого элемента, а зачастую выполняет обе эти роли.

Говорят, что элемент является родителем другого элемента, если в иерархии документа он находится прямо над этим элементом. Например, первый элемент p является родителем для элементов em и strong, тогда как strong – родитель элемента a, который в свою очередь является родителем другого элемента em. И наоборот, элемент является дочерним элементом другого элемента, если он находится прямо под этим элементом. Таким образом, элемент a – это дочерний элемент элемента strong, который в свою очередь является потомком элемента p, и т. д.

Термины родительский и дочерний элементы – это частные случаи терминов предок (ancestor) и потомок (descendant). Между ними существует разница: если в представлении в виде древовидного списка элемент находится ровно на один уровень выше другого, между ними существуют родительско-дочерние отношения.


Если путь от одного элемента к другому пересекает два или более уровней, между элементами существуют отношения предок-потомок, но не родительско-дочерние. (Конечно, дочерний элемент также является потомком, а родитель – предком.). Первый элемент ul – это родитель двух элементов li, но первый ul также является предком всех элементов, происходящих от его элемента li, вплоть до самых глубоко вложенных элементов li.

Элемент a, который является дочерним по отношению к strong, но также и потомком абзаца, элементов body и html. Элемент body – предок всего, что броузер будет отображать по умолчанию, а элемент html – предок всего документа. Поэтому элемент html также называют корневым элементом (root element).

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор между селектором классов и селектором идентификаторов
Выбор на основании конкретного значения атрибута
Выбор первого дочернего элемента

Вернуться в раздел: CSS / 2. Селекторы