CSS 计数器详解

Posted 2022-11-05 jesse131

在前端开发中总少不了列表项，对于列表项序号，射鸡师一般会列出个1，2，3...序号。在不了解css计数器属性之前，我一般会用精灵图，用类名来区分序列号图片。这样做尽管可以达到目的，但是很不方便，开发过程耗时较长而且维护修改起来较困难。用css counter配合伪类的content完美的解决了这个问题，这里详细介绍下css counter属性

计数器属性介绍

计数器的值通过使用counter-reset 和 counter-increment 操作，在 content 上应用 counter() 或 counters()函数来显示在页面上。

counter-reset

设置计数器的名称和起始值

Name:counter-reset
Value:  [ <custom-ident> <integer>? ]+ | none
Initial:    none
Applies to: all elements
Inherited:  no
Percentages:    n/a
Computed value: the keyword none or a list, each item an identifier paired with an integer
Canonical order:    per grammar
Animation type: by computed value type

custom-indent 计数器名字 可以同时命名多个计数器
integer 初始值 默认是0 也可以是负数

.counter
    counter-reset:sequence; /* 计数器名称是sequence */

.counter
    counter-reset:sequence 2; /* 计数器名称是sequence 且起始值是2*/

counter-increment

设置某个计数器每次计数的变化值。如果缺省，则使用默认变化值1

Name:   counter-increment
Value:  [ <custom-ident> <integer>? ]+ | none
Initial:    none
Applies to: all elements
Inherited:  no
Percentages:    n/a
Computed value: the keyword none or a list, each item an identifier paired with an integer
Canonical order:    per grammar
Animation type: by computed value type

custom-indent 计数器名字 可以同时命名多个计数器
integer 初始值 默认是1

counter()

这是个方法，不是属性，作用是用字符串或图片将计数器显示出来。这两个计算方法要和伪元素的 content 属性搭配使用。
用法一

content: counter(name)

counter 计算符前后可以随意加字符串来对最后的效果做拼接。可点击查看demo
用法二

content: counter(name,style)

这里的style参数支持的关键字值就是list-style-type支持的那些值。作用是，我们递增递减可以不一定是数字，还可以是英文字母，或者罗马文等。

list-style-type：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

可点击查看demo
counter()实现多层嵌套demo

counters()

作用和counter()一样，差别是counters只用于多层嵌套

counters(name,string)        
counters(name,string,style)  /*style参数与counter相同*/

其中，string参数为字符串（需要引号包围的）（必须参数），表示子序号的连接字符串。例如1.1的string就是‘.‘, 1-1就是‘-‘.
counters()实现多层嵌套demo

对比counter()和counters()实现的多层嵌套
counter()实现多层嵌套时，他的层级序号是手动拼起来的
counters()的多层嵌套则是嵌套层会自动带上其父层的嵌套序号

注意点
一个元素，如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性（针对支持浏览器），则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。

兼容性

IE8以上都兼容，所以在列表项排序的时候可以放心大胆地使用，
可点击查看caniuse结果

参考资料

CSS counter计数器(content目录序号自动递增)详解