我正在努力在我拥有的 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 开始。
最佳答案
您正在将计数器重置为 1:
ol.content {
counter-reset: item 1;
list-style: none;
}
如果为嵌套列表将其重置为 0,它将按预期工作:
ol.content ol.content {
counter-reset: item 0;
}
关于html - 为嵌套列表重置 CSS 计数器,格式为 1.1、1.2、,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48165919/