我使用下面的css在ol
中生成嵌套计算:
ol{
counter-reset: item;
}
ol li{
display: block;
}
ol li:before{
content: counters(item, ".")". ";
counter-increment: item;
float: left;
margin-right: 5px;
}
在某种程度上的嵌套,我想重置嵌套。我怎样才能做到?
例如,
<ol>
<li>
<ol>
<li>
<ol>
<li>
<ol class="reset">
<li>
<ol>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
给出以下信息:
1.
1.1
1.1.1
1.1.1.1
1.1.1.1.1
但我想要这样的结构
1.
1.1
1.1.1
1 # reset here
1.1
最佳答案
您可以重置计数器并在子列表项中重新开始。
ol li {
counter-reset: item;
display: block;
}
ol li::before {
content: counters(item, ".")". ";
counter-increment: item;
}
.reset li {
counter-reset: reset_item;
}
.reset li::before {
content: counters(reset_item, ".")". ";
counter-increment: reset_item;
}
<ol>
<li>
<ol>
<li>
<ol>
<li>
<ol class="reset">
<li>
<ol>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
关于html - 在ol中重置嵌套计数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54727012/