我使用以下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>