web前端|css教程
css,计数器,自动编号
web前端-css教程
在css中可以使用计数器函数counter()和counters()配合content属性来分别实现给元素自动嵌套编号的效果，下面我们就来看看CSS计数器函数counter()和counters()是如何自动嵌套编号的。
百度网络硬盘源码,vscode背景怎么调亮,ubuntu vpn命令,tomcat访问路径修改,sqlite并发数,网页设计登录,数据库主机怎么填写,合租服务器久久idc好,支付宝退款插件,前端框架scope,爬虫豆瓣简介,绿色php,seo词汇,springboot雷神,免费照片的网站模板免费下载,网页支付宝收款怎么收,天猫优惠模板管理系统,wordpress后台登录,wordpress 判断是否页面,华众虚拟主机管理系统安装,家居类小程序源码lzw
文章源码 轻量,ubuntu虚拟街蓝屏,通过鼠标反爬虫,php %转义,半山娱乐seolzw
css计数器使用多个counter()函数嵌套编号
.net图书销售网站源码,ubuntu指令不能输入,tomcat部署war包释放,nutch爬虫管理,php接口案例,专业seo有话要多少钱lzw
css计数器的counter()函数是设置元素单个编号的，但我们可以嵌套使用counter()函数来设置嵌套编号。
我们来看看是如何实现的，给出html代码：
CSS计数器自动嵌套编号
大标题二级标题
二级标题的内容，二级标题的内容，二级标题的内容！
大标题
二级标题
二级标题的内容，二级标题的内容，二级标题的内容！
二级标题
二级标题的内容，二级标题的内容，二级标题的内容！
效果图：
下面我们就来看看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) ". ";}
效果图：
2、使用css计数器让二级标题
自动编号
在h3标签的父容器h2标签中给css计数器添加名称“sub-counter”，初始化计数器；
然后在h3标签中定义计数器每次递增的值，在定义二级标题的样式。
最后使用:before选择器和content属性把编号添加到h3标签前显示。
h2 { counter-reset: sub-counter;}h3 { counter-increment: sub-counter; font-style: italic; color: #3498DB;}h3:before { content: counter(my-counter) "." counter(sub-counter) " ";}
使用counter(my-counter) 把大标题的编号放在最前面，在使用”.”分隔，然后是使用counter(sub-counter)显示二级标题自身的编号。
效果图：
css计数器使用counters()函数嵌套编号
使用counters()函数，我们可以在一个声明中设置多个计数器，默认情况下这些计数器将嵌套。
注：counters()函数只有在对实际嵌套在标记中的嵌套元素进行编号时， 该函数才有效。例：
标签
下面我们通过简单的代码示例来看看counters()函数是如何嵌套标号的。
html代码：
Item Sub-Item Sub-Item Sub-Sub-Item Sub-Sub-Item Item Sub-Item Sub-Item Sub-Item
css代码：
.container { margin: 40px auto; max-width: 700px; background-color: white; padding: 1.5em;}ul { list-style: none; counter-reset: nested-counter;/*初始化css计数器*/}ul li { counter-increment: nested-counter;/*定义css计数器每次递增的值*/ line-height: 1.6;}ul li:before { content: counters(nested-counter, ".") ") ";/*显示编号*/ font-weight: bold;}
效果图：
总结：
