Question

我使用以下CSS在ol中生成嵌套计数：

ol{
    counter-reset: item;
}
ol li{
    display: block;
}
ol li:before{
    content: counters(item, ".")". ";
    counter-increment: item;
    float: left;
    margin-right: 5px;
}

在某种程度的嵌套中，我想重置嵌套。我该如何实现？

例如，

<ol>
    <li>
        <ol>
            <li>
                <ol>
                    <li>
                        <ol class="reset">
                            <li>
                                <ol>
                                    <li></li>
                                </ol>
                            </li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

给出以下内容：

但是我想要这样的结构

1.
  1.1
     1.1.1
        1 # reset here
          1.1

Answer 1

您可以重置计数器，然后在子菜单项中重新开始。

ol li {
  counter-reset: item;
  display: block;
}

ol li::before {
  content: counters(item, ".")". ";
  counter-increment: item;
}

.reset li {
  counter-reset: reset_item;
}

.reset li::before {
  content: counters(reset_item, ".")". ";
  counter-increment: reset_item;
}

<ol>
  <li>
    <ol>
      <li>
        <ol>
          <li>
            <ol class="reset">
              <li>
                <ol>
                  <li></li>
                </ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

在ol中重置嵌套计数

1 个答案: