Порядок селектора в css?

Question

[LOG228]

Вот как выглядит на странице

код HTML

<ol>
        <li>Пункт
         <ol>
          <li>Подпункт</li>
          <li>Подпункт</li>
          <li>Подпункт</li>
         </ol>
        </li>
        <li>Пункт
         <ol>
          <li>Подпункт</li>
          <li>Подпункт</li>
         </ol>
        </li>
        <li>Пункт
            <ol>
                <li>Подпункт</li>
                <li>Подпункт</li>
                <li>Подпункт</li>
            </ol>
        </li>
       </ol>

Код CSS

li { list-style-type: none; } 
ol { counter-reset: list1; } 
ol li:before {
 counter-increment: list1; 
 content: counter(list1) ". "; 
}
ol ol { counter-reset: list2; } 
ol ol li:before {
 counter-increment: list2; 
 content: counter(list1) "." counter(list2) ". "; 
}

Возможно вопрос будет глупый либо не понятный.

1. Не могу понять последовательность то есть почему веб страница выводит в подпункт 1.1. откуда вторая 1? Если по началу я отключил нумерацию?

2. 1 ol ol к какому дочернему элементу идет обращение? 2.2. Или же ol ol li? Первый родитель? Второй дочерни?
2.1 То есть почему она обратилась именно к пункту 2? ol ol Если в начале родитель ol потом дочерни ol. Хотя в родители 2 ol а обратилась именно к второму пункту, извиняюсь если задаю не корректно.

Answer 1

[Вадим]

На все Ваши вопросы есть ответы прямо в браузере, если Вы научитесь пользоваться инструментами разработчика.
В данном случае - инспектор разметки. Информации в интернете достаточно.

почему веб страница выводит в подпункт 1.1. откуда вторая 1?

Её добавляет вот этот код:

ol ol li:before {
 counter-increment: list2; 
 content: counter(list1) "." counter(list2) ". "; 
}

ol ol к какому дочернему элементу идет обращение?

Ко всем ol которые вложены на любом уровне в другой ol. Поэтому если Вы во вложенный ol добавите ещё один ol, то нумерация у них будет одинаковая.

Comments

[LOG228]

Еще один вопрос, почему в Подпункте 1.1. и Подпункте 2.1. всегда возобновляется единица? Когда в свою очередь каждый Пункт становится 1 2 3 и первая цифра подпункта меняется на следующую а вторая по новой?

[Вадим]

LOG228, https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

ol { counter-reset: list1; } 
ol ol { counter-reset: list2; }

Каждый список у Вас сбрасывает счётчик1, а каждый вложенный список сбрасывает счётчик 2.

Соответственно элементы верхнего списка нумеруются через это правило:

ol li:before {
 counter-increment: list1; 
 content: counter(list1) ". "; 
}

А вложенного через это:

ol ol li:before {
 counter-increment: list2; 
 content: counter(list1) "." counter(list2) ". "; 
}

Таким образом получаем все элементы верхнего списка имеют нумерацию через counter1, в элементы вложенных список свою нумерацию через counter2, при этом каждый последующий вложенный список начинает нумерацию counter2 заного.