电话
13363039260
css计数器如何实现自动嵌套编号
2024-01-17 15:35 小编
css计数器使用多个counter()函数嵌套编号
css计数器的counter()函数是设置元素单个编号的，但我们可以嵌套使用counter()函数来设置嵌套编号。
我们来看看是如何实现的，给出html代码：
<article>
<h1>CSS计数器自动嵌套编号</h1>
<h2>大标题</h2>
<h3>二级标题</h3>
<p>
二级标题的内容，二级标题的内容，二级标题的内容！
</p>
<h2>大标题</h2>
<h3>二级标题</h3>
<p>
二级标题的内容，二级标题的内容，二级标题的内容！
</p>
<h3>二级标题</h3>
<p>
二级标题的内容，二级标题的内容，二级标题的内容！
</p>
</article>
效果图：
3.jpg
下面我们就来看看css是如何实现嵌套编号的。
1、使用css计数器让大标题<h2>自动编号
在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)".";
}
猜你喜欢
联络方式：
13363039260
微信二维码 