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 код менять нельзя. Используйте теорию из этого урока.
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.
Это займет не больше минуты.