html - 为嵌套列表重置 CSS 计数器，格式为 1.1、1.2、

Question

我正在努力在我拥有的 CSS 中找到一种方法...

https://jsfiddle.net/Lh0kLvj7/

    ol.content {
  counter-reset: item 1;
  list-style: none;
}

li.content:before {
  counter-increment: item;
  content: counter(item)". ";
}

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

<p><span style="font-size: 24px;">On this page:</span></p>

<ol class="content">
  <li class="content"><a href="#">section TWO</a>

    <ol class="content">
      <li class="content"><a href="#section2-1">TWO point *ONE* (not 2.2!)</a></li>
      <li class="content"><a href="#section2-2">TWO point *TWO*</a></li>
      <li class="content"><a href="#section2-3">TWO point *THREE*</a></li>
      <li class="content"><a href="#section2-4">TWO point *FOUR*</a>

        <ol class="content">
          <li class="content">TWO point *FOUR* point *ONE* (not 2.5.2!)</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
        </ol>
      </li>
      <li class="content"><a href="#section2-5">TWO point *FIVE*</a></li>
    </ol>
  </li>
</ol>

...首先以非 1 的数字开始父计数器序列(即上面 fiddle 中的第 2 部分)，但嵌套列表实际上从 .1 开始。我不擅长 CSS，所以我可能缺少一些简单的东西。在上面的 fiddle 中，您会看到 HTML 显示不正确...

2.

2.2

2.3

2.4

2.5

2.5.2

当我需要...

2.

2.1

2.3

2.4

2.4.1

我肯定需要能够从初始/父级的任何数字开始，所以我假设我将不得不使用 counter-reset: item 1;, counter-reset: item 2;, counter-reset: item 4; 等某处，但我需要开始嵌套列表应重置为从 1 开始。

Answer 1

您正在将计数器重置为 1:

ol.content {
  counter-reset: item 1;
  list-style: none;
}

如果为嵌套列表将其重置为 0，它将按预期工作:

ol.content ol.content {
  counter-reset: item 0;
}

https://jsfiddle.net/Lh0kLvj7/3/