html - 如何在 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

您可以查看我的案例:

我们只需要在第一个 child 处重置

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