CSS 计数器
前言
在实际网页开发过程中,会有许多内容、列表项等需要进行编号,这样才会给用户更加直观的获取信息,增加用户的体验度。但如果我们手动进行编号的话,会增加我们的工作量,代码也会非常繁琐。而在css中有一个非常强大的功能就是css计数器,通过使用函数会自动为这些列表项进行编号,会极大地提高我们的工作量。
css计数器会使用到以下几个属性。
- counter-reset - 创建或者重置计数器
- counter-increment - 递增变量
- content - 插入生成的内容
- counter() 或 counters() 函数 - 将计数器的值添加到元素
counter-reset 是为计数器取名字,是自定义的。
例如:下面是给ol无序列表设计的计数器,
首先是给计数器取名字
其次是想要从谁开始计数,就要在谁里面添加递增变量,这里我在li中通过伪元素来添加递增变量:
最后就是怎么显示编号了,也是通过伪元素来添加counter()函数来实现,中间用"." 来分隔。
counter()函数编号风格默认是阿拉伯数字;
counters()函数也是可以互相嵌套的;例如下面在每个li里在嵌套一个ol
这是最终效果:
以上就是我关于css选择器的总结。