Используя следующий код HTML, стилизуйте список, чтобы получить результат, показанный на рис. 1.
<h2>Зебры</h2>
<ul class="zebra">
<li>Саванная зебра
<ul>
<li>Безгривая зебра</li>
<li>Зебра Гранта</li>
<li>Зебра Крошея</li>
<li>Зебра Чапмана</li>
</ul>
</li>
<li>Горная зебра
<ul>
<li>Зебра Хартманна</li>
<li>Горная капская зебра</li>
</ul>
</li>
</ul>
Рис. 1
Обратите внимание, что для пунктов списка первого уровня используется следующий символ — 🦓, а для вложенного списка применяются квадратные маркеры.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Список</title>
<style>
.zebra {
& > li {
list-style-type: '🦓';
padding-left: 0.5em;
& > ul > li {
list-style-type: square;
}
}
}
</style>
</head>
<body>
<h2>Зебры</h2>
<ul class="zebra">
<li>Саванная зебра
<ul>
<li>Безгривая зебра</li>
<li>Зебра Гранта</li>
<li>Зебра Крошея</li>
<li>Зебра Чапмана</li>
</ul>
</li>
<li>Горная зебра
<ul>
<li>Зебра Хартманна</li>
<li>Горная капская зебра</li>
</ul>
</li>
</ul>
</body>
</html>