@Sergeysemenovich

Как работает список в данном случае?

css к сожалению нет. Как работает список в данном случае ? почему в одном случае то обычный маркер , то полый , то квадратный ? Какой css код может для этого быть?Не могу понять

5f30cfb1101a8108848113.png
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Многоуровневый список покупок</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Список покупок</h1>
    <ul>
      <li>Еда
       <ul>
        <li>Рыба
         <ul>
          <li>Филе форели, 2 шт</li>
          <li>Карась, 5 шт</li>
          <li>Окунь, 10 шт</li>
         </ul>
        </li>
        <li>Молочные продукты
         <ul>
           <li>Сметана</li>
           <li>Йогурт</li>
           <ul>
            <li>Жирный</li>
            <li>Обезжиренный</li>
          </ul>
         </ul>
         </li>
        </ul>
      <li>Вещи
       <ul>
        <li>Игрушки</li>
         <ul>
          <li>Когтеточка</li>
          <li>Мячи, 2 шт</li>
         </ul>
          
         <li>Уход</li>
          <ul>
           <li>Расчёска для шерсти</li>
           <li>Мусс для усов</li>
          </ul>
        </ul>
       </li>
     </ul>     
  </body>
</html>
  • Вопрос задан
  • 98 просмотров
Решения вопроса 3
kocherman
@kocherman
Хоть для вашей страницы стили и не нужны, я все же сделал для вас кое-какие. Возможно, это поможет вам разобраться в этом.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Многоуровневый список покупок</title>
<style>

body { padding: 1rem; background: #ffffdd;}
body > ul {margin: 1rem; padding: 1rem; background: #ffaaff;}
body > ul > li {margin: 1rem; padding: 1rem; background: #ffddff;}
body > ul > li > ul {margin: 1rem; padding: 1rem; background: #ddffff;}
body > ul > li > ul > li {  margin: 1rem; padding: 1rem; background: #ffdddd; }
body > ul > li > ul > li ul {margin: 1rem; padding: 1rem; background: #ddddff;}
body > ul > li > ul > li ul li {margin: 1rem; padding: 1rem; background: #ddffdd;}
</style>
</head>

<body>
      <h1>Список покупок</h1>
    <ul>
      <li>Еда
       <ul>
        <li>Рыба
         <ul>
          <li>Филе форели, 2 шт</li>
          <li>Карась, 5 шт</li>
          <li>Окунь, 10 шт</li>
         </ul>
        </li>
        <li>Молочные продукты
         <ul>
           <li>Сметана</li>
           <li>Йогурт
           <ul>
            <li>Жирный</li>
            <li>Обезжиренный</li>
          </ul>
          </li>
         </ul>
         </li>
        </ul>
      </li>
      <li>Вещи
       <ul>
        <li>Игрушки
         <ul>
          <li>Когтеточка</li>
          <li>Мячи, 2 шт</li>
         </ul>
        </li>
         <li>Уход
          <ul>
           <li>Расчёска для шерсти</li>
           <li>Мусс для усов</li>
          </ul>
          </li>
        </ul>
       </li>
     </ul>     

</body>

</html>
Ответ написан
mrusklon
@mrusklon
если долго мучится - что нибудь получится
если не задан для конкретно этого случая css то он наследуется где то раньше, вплоть до стандарта браузера
Ответ написан
@bkosun
Браузер самостоятельно оформляет маркеры элементов списка, если стили не заданы явно. Т.е. совсем необязательно использовать CSS, чтобы получить результат, который Вы видите на скриншоте.

Используйте list-style, list-style-type, list-style-image, чтобы переопределить значения по умолчанию.

https://developer.mozilla.org/en-US/docs/Web/CSS/l...
https://developer.mozilla.org/en-US/docs/Web/CSS/l...
https://developer.mozilla.org/en-US/docs/Web/CSS/l...

https://stackoverflow.com/questions/11025047/how-c...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы