Как сбросить нумерацию упорядоченного списка в CSS

Question

Как я могу сбросить нумерацию для вложенных упорядоченных списков.

Запустив этот фрагмент, выдайте мне такой вывод:

• Список 1
• Список 2

• Список 3

  1. Список 1
  2. Список 2

  3. Список 3

     • Список 1
     • Список 2

     • Список 3

       3.1. List 1
       3.2. List 2
       3.3. List 3
               3.3.1. List 1
               3.3.2. List 2
               3.3.3. List 3
                       3.3.3.1. List 1
                       3.3.3.2. List 2
                       3.3.3.3. List 3
       

Хочу3.1 начать с 1. Как я могу это сделать?Нужно ли использовать несколько счетчиков?или один подойдет?Я не особо использую счетчики css.Код работает, если это серия вложенных упорядоченных списков, но когда в нем есть неупорядоченный список, он начинает давать сбой.Он по-прежнему продолжает нумерацию из предыдущего упорядоченного списка.

ol {
    counter-reset: item 0;
    list-style: none;
}
ul {
    counter-reset: item "";
}
ul:first-child>li {
    counter-reset: item "";
}
ul>li:before {
    content: " ";
    margin-right: 1em;
}
ol ul li:last-child {
    counter-reset: item "";
}
ol>li:before {
    counter-increment: item;
    content: counters(item, ".")".  ";
}

<ul class="ul">
    <li class="li">List 1</li>
    <li class="li">List 2</li>
    <li class="li">List 3
        <ol class="ol">
            <li class="li">List 1</li>
            <li class="li">List 2</li>
            <li class="li">List 3<ul class="ul">
                    <li class="li">List 1</li>
                    <li class="li">List 2</li>
                    <li class="li">List 3
                        <ol class="ol">
                            <li class="li">List 1</li>
                            <li class="li">List 2</li>
                            <li class="li">List 3
                                <ol class="ol">
                                    <li class="li">List 1</li>
                                    <li class="li">List 2</li>
                                    <li class="li">List 3
                                        <ol class="ol">
                                            <li class="li">List 1</li>
                                            <li class="li">List 2</li>
                                            <li class="li">List 3</li>
                                        </ol>
                                    </li>
                                </ol>
                            </li>
                        </ol>
                    </li>
                </ul>
            </li>
        </ol>
    </li>
</ul>

Редактировать: я все еще не мог этого сделать, даже с несколькими счетчиками сброса.Есть ли надежда на это?

Answer 1

Вы можете просмотреть мой случай:

Нам просто нужно сбросить на первого ребенка

.tos ol > li {
    counter-increment: listNumbering;
    list-style: none;
}
.tos ol > li:before {
    content: counter(listNumbering) '. ';
}
.tos ol > li:first-child {
    counter-reset: listNumbering;
}