Здравствуйте! Продолжаем изучение css селекторов и на очереди селекторы потомков.
Веб-страница может иметь сложную организацию, одни элементы внутри себя могут определять другие элементы. Вложенные элементы иначе можно назвать потомками. А контейнер этих элементов - родителем.
Например, пусть элемент body на веб-странице имеет следующее содержимое:
<body> <h2>Заголовок</h2> <div> <p>Текст</p> </div> </body>
Внутри элемента body определено три вложенных элемента: h2, div, p. Все эти элемены являются потомками элемента body. А внутри элемента div определен только один вложенный элемент - p, поэтому элемент div имеет только одного потомка. Используя специальные селекторы, мы можем стилизовать вложенные элементы или потомков внутри строго определенных элементов. Например, у нас на странице могут быть параграфы внутри блока с основным содержимым и внутри блока футера. Но для параграфов внутри блока основного содержимого мы захотим установить один шрифт, а для параграфов футера другой.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы CSS</title>
<style>
#main p{
font-size: 16px;
}
#footer p{
font-size: 13px;
}
</style>
</head>
<body>
<div id="main">
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<div id="footer">
<p>Текст футера</p>
</div>
</body>
</html>
Читать далее
Вступите в группу, и вы сможете просматривать изображения в полном размере
Это интересно
0
|
|||
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
20250326162447