css计数器如何实现自动嵌套编号
导读： css计数器使用多个counter( 函数嵌套编号 css计数器的counter( 函数是设置元素单个编号的，但我们可以嵌套使用counter( 函数来设置嵌套编号。 我们来看看是如何实现的，给出html代码： ...
css计数器使用多个counter()函数嵌套编号
css计数器的counter()函数是设置元素单个编号的，但我们可以嵌套使用counter()函数来设置嵌套编号。
我们来看看是如何实现的，给出html代码：
CSS计数器自动嵌套编号
大标题
二级标题
二级标题的内容，二级标题的内容，二级标题的内容！
大标题
二级标题
二级标题的内容，二级标题的内容，二级标题的内容！
二级标题
二级标题的内容，二级标题的内容，二级标题的内容！
效果图： 3.jpg 下面我们就来看看css是如何实现嵌套编号的。 1、使用css计数器让大标题自动编号
在h2标签的父容器article标签中使用counter-reset属性给css计数器添加名称"my-counter"，初始化计数器；
然后在h2标签中使用counter-increment属性定义计数器每次递增的值，默认值为1，可省略。
最后使用:before选择器和content属性把编号添加到h2标签前显示。
article{
counter-reset:my-counter;
}
h2{
counter-increment:my-counter;
}
h2:before{
content:counter(my-counter)".";
}
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css计数器如何实现自动嵌套编号
本文地址： https://pptw.com/jishu/664678.html