使用CSS计数器

时间：2023-03-30 22:03:06 CSS

使用CSS计数器CSS计数器本质上是CSS维护的变量，可以根据CSS规则递增以跟踪使用情况。所以关于CSS计数器的使用，读者需要见仁见智。有网友使用计数器对文档的列表编号进行排序，也有网友使用计数器+伪类元素来打造更华丽的效果。使用计数器语法1.命名变量并定义计数器的值，默认为0。counter-reset:varname;增加计数器的值，默认增量为1。counter-increment:varname;counter()/counters()方法显示计数。计数器（变量名）；请注意，CSS计数器仅在与content属性一起使用时才有效。相关用法如何自定义counter-reset默认值counter-reset:varnamenumber;允许设置为负值，也允许设置为小数（仅Chrome支持）。同时也支持同时定义多个变量：counter-reset:varname1numbervarname2numbervarname3number;参考代码点击按钮统计HTML

CSS.box{counter-reset:num;}input:checked{counter-increment:num;}input:checked:before{content:counter(num);}文章序号自动递增HTML

文章目录标题1

文章目录标题2

文章目录标题3

文章目录标题4

文章directorytitle5

CSS.box{counter-reset:num;}h1{counter-increment:num;}h1:before{content:counter(num);}文章序号嵌套递增HTML

文章目录标题

文章目录副标题

文章目录标题

文章目录副标题

文章目录标题

文章目录副标题

文章目录标题

文章目录副标题

文章目录标题

文章目录副标题

CSS.box{counter-reset:num;}h1{counter-reset:子编号；counter-increment:num;}h1:before{content:counter(num);}h2{counter-increment:subnum;}h2:before{content:counter(num)"."counter(subnum);}结论在上面的案例和分享，其实提到的东西很少。想了解更多CSS计数器的读者可以阅读张新旭老师的文章《CSS counter计数器(content目录序号自动递增)详解》。