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

这篇文章主要为大家展示了“css计数器怎么实现自动嵌套编号”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css计数器怎么实现自动嵌套编号”这篇文章吧。

成都创新互联公司成立十年来,这条路我们正越走越好,积累了技术与客户资源,形成了良好的口碑。为客户提供成都网站建设、网站建设、网站策划、网页设计、域名与空间、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等,这些对于网站建设都非常重要,成都创新互联公司通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案,携手广大客户,共同发展进步。

css计数器使用多个counter()函数嵌套编号

css计数器的counter()函数是设置元素单个编号的,但我们可以嵌套使用counter()函数来设置嵌套编号。

我们来看看是如何实现的,给出html代码:

CSS计数器自动嵌套编号

大标题

二级标题

二级标题的内容,二级标题的内容,二级标题的内容!

大标题

二级标题

二级标题的内容,二级标题的内容,二级标题的内容!

二级标题

二级标题的内容,二级标题的内容,二级标题的内容!

效果图:

3.jpg

下面我们就来看看css是如何实现嵌套编号的。

1、使用css计数器让大标题

自动编号

在h3标签的父容器article标签中使用counter-reset属性给css计数器添加名称“my-counter”,初始化计数器;

然后在h3标签中使用counter-increment属性定义计数器每次递增的值,默认值为1,可省略。

最后使用:before选择器和content属性把编号添加到h3标签前显示。

article{

counter-reset:my-counter;

}

h3{

counter-increment:my-counter;

}

h3:before{

content:counter(my-counter)".";

}

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


分享文章:css计数器怎么实现自动嵌套编号
分享链接:http://scyanting.com/article/ggeeei.html