我正在制作带有嵌套数字排序列表的目录。它开始的很好，但是一旦我返回一个级别，编号就会结束。正如您所看到的，一旦它升到了第4级，不仅数字编号减少了，而且现在无论级别如何，一切都有一个额外的数字。
这就是我最终得到的：
SECTION 1
1 Item 1
1.1 Sub Item
1.1.1 Level 3 Item
1.1.1.1 Level 4 Item
1.1.1.2 Level 4 Item
1.1.1.3 Level 4 Item
1.1.1.4 Level 4 Item
1.1.1.5 Level 4 Item
1.1.1.6 Level 3 Item
1.1.1.1 Level 4 Item
1.1.1.2 Level 3 Item
1.1.1.3 Level 3 Item
1.1.2 Level 2 Item
这是我正在使用的代码：
ol.toc {
counter-reset: item;
}
li.toc {
display: block;
}
li.toc:before {
content: counters(item, ".") " ";
counter-increment: item;
}<!DOCTYPE html>
<html>
<head>
<title>Table of Contents</title>
</head>
<body>
<div>
<h2>SECTION 1</h2>
</div>
<div style="float: clear;">
<ol class="toc">
<li class="toc"> Item 1</li>
<ol class="toc">
<li class="toc"> Sub Item</li>
<ol class="toc">
<li class="toc"> Level 3 Item</li>
<ol class="toc">
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
</ol>
<li class="toc"> Level 3 Item</li>
<ol class="toc">
<li class="toc"> Level 4 Item</li>
</ol>
<li class="toc"> Level 3 Item</li>
<li class="toc"> Level 3 Item</li>
</ol>
<li class="toc"> Level 2</li>
</ol>
</ol>
</div>
</body>
</html>
不确定发生了什么。我找不到太多适合我需要的示例。
感谢您的帮助！
答案 0 :(得分：3)
我认为编号错误，因为您应该将每个孩子<ol>包裹在其父<li>中。为了获得更好的外观，请设置最高父list-style-type:none;中的<ol>。
签出：
ol.toc {
counter-reset: item;
}
li.toc {
display: block;
}
li.toc:before {
content: counters(item, ".") " ";
counter-increment: item;
}
.outer li {
list-style-type: none;
}<!DOCTYPE html>
<html>
<head>
<title>Table of Contents</title>
</head>
<body>
<div>
<h2>SECTION 1</h2>
</div>
<div style="float: clear;">
<ol class="toc outer">
<li class="toc"> Item 1</li>
<ol class="toc">
<li class="toc"> Sub Item</li>
<li>
<ol class="toc">
<li class="toc"> Level 3 Item</li>
<li>
<ol class="toc">
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
</ol>
</li>
<li class="toc"> Level 3 Item</li>
<li>
<ol class="toc">
<li class="toc"> Level 4 Item</li>
</ol>
</li>
<li class="toc"> Level 3 Item</li>
<li class="toc"> Level 3 Item</li>
</ol>
</li>
<li class="toc"> Level 2</li>
</ol>
</ol>
</div>
</body>
</html>