如何使用CSS重置有序列表编号

Question

如何重置嵌套有序列表的编号。

运行此代码片段，会得到以下输出结果：

• List 1
• List 2

• List 3

  1. List 1
  2. List 2

  3. List 3

     • List 1
     • List 2

     • List 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>

编辑：即使进行了多次重置计数器，我仍然无法做到这一点。还有希望吗？

- Nikku Kahel

---

@AndrewL64，谢谢您的回复，但我还希望嵌套的有序列表可以遵循先前的编号。如果父级是有序列表，则将继承编号，并且仅在其为有序列表时重置。 - Nikku Kahel

好的，让我试着调整一下代码。 - AndrewL64

谢谢，我已经苦苦挣扎了很长时间了。如果我能删除嵌套有序列表中的 3 就好了。 - Nikku Kahel

所以，当你有3.1时，你想要的是1.3.1还是只有1？ - user621639

@GrávujMiklósHenrich，如果父级不是有序列表，我想从1重新开始编号。 - Nikku Kahel

Answer 1

你可以查看我的案例:

我们只需要在第一个子元素处进行重置。

"Original Answer"翻译成"最初的回答"。

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

- Tung Mang

---

这不会破坏之前的样式吗？我的意思是，如果您将其与默认的非嵌套列表项混合使用，它们可能会有不同的外观。（顺便说一句，这是一个可行的解决方案，所以点赞+1） - Christian Vincenzo Traina

Answer 2

你想要的是一个新的、不同的计数器，在ol在ul中的情况下开始：

ol {
  counter-reset: item 0;
  list-style: none;
}

ol>li:before {
  counter-increment: item;
  content: counters(item, ".")".  ";
}

ol ul ol {
  counter-reset: subitem 0;
}

ol ul ol>li:before {
  counter-increment: subitem;
  content: counters(subitem, ".")".  ";
}

<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
        <ol class="ol">
          <li class="li">List 1</li>
          <li class="li">List 2</li>
          <li class="li">List 3</li>
        </ol>
      </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">Sub List 1</li>
              <li class="li">List 2
                <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>
              <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>
        </ul>
      </li>
    </ol>
  </li>
</ul>

- Arleigh Hix

Answer 3

根据w3文档，您可以直接定义value属性来实现它。

<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

- Sailist