css 计数器

CSS 计数器

前言

在实际网页开发过程中，会有许多内容、列表项等需要进行编号，这样才会给用户更加直观的获取信息，增加用户的体验度。但如果我们手动进行编号的话，会增加我们的工作量，代码也会非常繁琐。而在css中有一个非常强大的功能就是css计数器，通过使用函数会自动为这些列表项进行编号，会极大地提高我们的工作量。

css计数器会使用到以下几个属性。

• counter-reset - 创建或者重置计数器
• counter-increment - 递增变量
• content - 插入生成的内容
• counter() 或 counters() 函数 - 将计数器的值添加到元素

counter-reset 是为计数器取名字，是自定义的。
例如：下面是给ol无序列表设计的计数器，
首先是给计数器取名字

其次是想要从谁开始计数，就要在谁里面添加递增变量，这里我在li中通过伪元素来添加递增变量：

最后就是怎么显示编号了，也是通过伪元素来添加counter（）函数来实现，中间用"." 来分隔。

counter（）函数编号风格默认是阿拉伯数字；
counters()函数也是可以互相嵌套的；例如下面在每个li里在嵌套一个ol

这是最终效果：

以上就是我关于css选择器的总结。