如何解决多级列表的css增量

Question

我的css计数器在ol之后不工作。

.sidebox ol {
counter-reset: section;
list-style-type: none;
}
.sidebox li::before {
counter-increment: section;
content: counters(section, ".") " ";
}

<div class="sidebox my-3 p-3">Contents
<ol>
<li><a href="#section_1">Lorem Ipsum Dor</a></li>
<li><a href="#section_2">Lorem Loreman</a></li>
<li><a href="#section_3">Lorem I Lorem</a></li>
<li><a href="#section_4">Loamsams</a></li>
<ol>
<li><a href="#section_5">Lmamam</a></li>
<li><a href="#section_6">lorem Sinam </a></li>
</ol>
<li><a href="#section_7">Hello</a></li>
</ol>
</div>

我不知道如何描述它，但我想要这样的清单。

1个标题
2个标题
2.1标题
3个标题

但是我的css显示为这个

1个标题
2个标题
2.1个标题
2.3个标题

如何解决，请帮我

Answer 1

您的CSS代码没有任何问题，它是您的HTML。你必须将第二个ol嵌套在第一个ol的li内，因此：

.sidebox ol {
counter-reset: section;
list-style-type: none;
}
.sidebox li::before {
counter-increment: section;
content: counters(section, ".") " ";
}

<div class="sidebox my-3 p-3">Contents
<ol>
<li><a href="#section_1">Lorem Ipsum Dor</a></li>
<li><a href="#section_2">Lorem Loreman</a></li>
<li><a href="#section_3">Lorem I Lorem</a></li>
<li><a href="#section_4">Loamsams</a>
<ol>
<li><a href="#section_5">Lmamam</a></li>
<li><a href="#section_6">lorem Sinam </a></li>
</ol></li>
<li><a href="#section_7">Hello</a></li>
</ol>
</div>