html – 重置嵌套列表的CSS计数器,格式为1.1,1.2,

2023年10月26日 155次阅读

我正努力在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>

…首先以不是一个的数字(即上面的小提琴中的第2部分)开始父计数器序列,但嵌套列表实际上从.1开始.我不擅长CSS,所以它可能是我想念的简单东西.在上面的小提琴中你会看到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开始.

最佳答案 您将计数器重置为1：

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

如果为嵌套列表将其重置为0,则按预期工作：

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

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

点赞