这篇文章主要为大家展示了“CSS计数器怎么实现自动嵌套编号”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css计数器怎么实现自动嵌套编号”这篇文章吧。 c
这篇文章主要为大家展示了“CSS计数器怎么实现自动嵌套编号”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css计数器怎么实现自动嵌套编号”这篇文章吧。
css计数器使用多个counter()函数嵌套编号
css计数器的counter()函数是设置元素单个编号的,但我们可以嵌套使用counter()函数来设置嵌套编号。
我们来看看是如何实现的,给出html代码:
<article>
<h2>CSS计数器自动嵌套编号</h2>
<h3>大标题</h3>
<h4>二级标题</h4>
<p>
二级标题的内容,二级标题的内容,二级标题的内容!
</p>
<h3>大标题</h3>
<h4>二级标题</h4>
<p>
二级标题的内容,二级标题的内容,二级标题的内容!
</p>
<h4>二级标题</h4>
<p>
二级标题的内容,二级标题的内容,二级标题的内容!
</p>
</article>
效果图:
3.jpg
下面我们就来看看css是如何实现嵌套编号的。
1、使用css计数器让大标题<h3>自动编号
在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计数器怎么实现自动嵌套编号”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!
--结束END--
本文标题: css计数器怎么实现自动嵌套编号
本文链接: https://www.lsjlt.com/news/91495.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0