如何在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计数器。如果代码是一系列嵌套的有序列表，则该代码有效，但是当内部有无序列表时，该代码将开始失败。它仍然从先前的有序列表继续编号。

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

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, ".")".  ";
}

编辑：即使使用多个重置计数器，我仍然无法执行此操作。这有什么希望吗？

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;
}