css计数器怎么实现自动嵌套编号

这篇文章主要为大家展示了“css计数器怎么实现自动嵌套编号”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css计数器怎么实现自动嵌套编号”这篇文章吧。
　　css计数器使用多个counter()函数嵌套编号
　　css计数器的counter()函数是设置元素单个编号的，但我们可以嵌套使用counter()函数来设置嵌套编号。
　　我们来看看是如何实现的，给出html代码：
　　
　　
　　
　　
　　
　　二级标题的内容，二级标题的内容，二级标题的内容！
　　
　　
　　
　　
　　二级标题的内容，二级标题的内容，二级标题的内容！
　　
　　
　　
　　二级标题的内容，二级标题的内容，二级标题的内容！
　　
　　
　　效果图：
　　3.jpg
　　下面我们就来看看css是如何实现嵌套编号的。
　　1、使用css计数器让大标题
　　在h3标签的父容器article标签中使用counter-reset属性给css计数器添加名称“my-counter”，初始化计数器；
　　然后在h3标签中使用counter-increment属性定义计数器每次递增的值，默认值为1，可省略。
　　最后使用:before选择器和content属性把编号添加到h3标签前显示。
　　a免费云主机、域名rticle{
　　counter-reset:my-counter;
　　}
　　h3{
　　counter-increment:my-counter;
　　}
　　h3:before{
　　content:counter(my-counter)”.”;
　　}

以上是“css计数器怎么实现自动嵌套编号”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: vue指令是什么及有什么作用

这篇文章主要介绍了vue指令是什么及有什么作用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue指令是什么及有什么作用文章都会有所收获，下面我们一起来看看吧。 在vue中，指令是带有“v-”前缀的特殊特性（属性），指令特性的值预…