我正在使用 CSS 计数器和嵌套的 OL 创建 HTML/CSS 中的目录,效果很好。现在,我想在顶级 OL 上设置一个类“toc”(因为页面上的 OL 不仅仅是目录)。
如何调整 CSS 选择器以使计数器样式仅适用于<ol class="toc">
?
如果您从第一个 OL 中删除 class="toc",您会看到项目编号按照您的预期嵌套......当您添加 toc 类时,一切都会变成锅。如何修复 css 选择器以使嵌套的项目编号按预期工作?
<style>
ol {
counter-reset: section; /* Creates a new instance of the
section counter with each ol
element */
list-style-type: none;
text-decoration:underline;
}
li:before {
counter-increment: section; /* Increments only this instance
of the section counter */
content: counters(section, ".") " "; /* Adds the value of all instances
of the section counter separated
by a ".". */
font-weight:bold;
}
</style>
<ol class="toc">
<li>item
<ol>
<li>item
<li>item
<ol>
<li>item
<li>item
<li>item
<li>item
<li>item
</ol>
</li>
<li>item
</ol>
</li>
<li>item
<ol>
<li>item
<li>item
<li>item
<li>item
</ol>
</li>
<li>item
<ol>
<li>item
<li>item
<li>item
<li>item
<li>item
<li>item
</ol>
</li>
<li>item
<ol>
<li>item
<ol>
<li>item
<li>item
<li>item
</ol>
</li>
<li>item
<ol>
<li>item
<li>item</li>
<li>item
<li>item
<li>item
<li>item</li>
</ol>
</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
</ol>
</ol>
</li>
</ol>