当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="container">
<ul>
<li> Item
<ul>
<li>Sub-Item</li>
<li>Sub-Item
<ul>
<li>Sub-Sub-Item</li>
<li>Sub-Sub-Item</li>
</ul>
</li>
</ul>
</li>
<li> Item
<ul>
<li>Sub-Item</li>
<li>Sub-Item</li>
<li>Sub-Item</li>
</ul>
</li>
</ul>
</div>
|
css代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .container {
margin: 40px auto;
max-width: 700px;
background-color: white;
padding: 1.5em;
}
ul {
list-style: none;
counter-reset: nested-counter;
}
ul li {
counter-increment: nested-counter;
line-height: 1.6;
}
ul li:before {
content: counters(nested-counter, ".") ") ";
font-weight: bold;
}
|
效果图：
总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。
以上就是css计数器如何实现自动嵌套编号的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css实现等高布局的三种方式（代码示例）
html如何用css美化表格
css如何实现边框长度控制功能
css中auto什么意思
css如何清除背景颜色
如何设置css作用域
bootstrap和css区别
css文件怎么引入
img元素可以用css吗
css不生效是什么原因
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css计数器如何实现自动嵌套编号
