104. Структура документа: родитель-потомок в CSS
Рассмотрим пример первый.
<!DOCTYPE html>
<html>
<head>
<title>codebra</title>
</head>
<body>
<ol>
<li>1</li>
<li>2</li>
</ol>
</body>
</html>
HTML документы строятся на иерархии элементов. Каждый элемент является родителем или потомком, или и тем, и другим. Например, элемент body
является родителем для элемента ol
. А элемент ol
является родителем для элементов li
. body
является дочерним элементу html
и так далее.
Родителем и потомком называют те элементы, разница между которыми один уровень. Если разница между элементами несколько уровней, например, body
и li
, то такие элементы называют предок (body
) и потомок (li
).

И теперь давайте посмотрим реальный пример.
<p>
<span>спан в абзаце</span>
</p>
<h1>
<span>спан в заголовке</span>
</h1>
Теперь первый span
(родитель p
) сделаем красного цвета. Второй span
(родитель h1
) сделаем зеленого цвета. Это реализовано в третьем примере.
p span {
color: red;
}
h1 span {
color: green;
}
Рассмотрим четвертый пример.
<p>
<b>
<span>жирный спан в абзаце</span>
</b>
</p>
То есть можно и больше двух селекторов использовать.
p b span {
color: red;
}
Похожие уроки и записи блога
- Сделайте цвет текста
спан 2
красного цвета. HTML код менять нельзя. Используйте теорию из этого урока.
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.
Это займет не больше минуты.