如何重置CSS有序列表编号

时间:2019-01-30 10:18:20

标签: html css listitem

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

运行此代码段,给我这样的输出:

  • 列表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>

编辑:即使使用多个重置计数器,我仍然无法执行此操作。对此有什么希望吗?

1 个答案:

答案 0 :(得分:1)

您可以查看我的案件:

enter image description here

我们只需要在第一个孩子处重设

b'\x00\x00\x00\x00\...