CSS 计数器

计数器

CSS 计数器(Counters)本质上是 CSS 内部维护的变量,这些变量根据指定的 CSS 规则发生变化,CSS 能够跟踪这些变化。

Counters 包含下面几个属性和方法:

  • counter-reset

    1
    counter-reset: [ <counter-name> <integer>? ]+ | none

    将计数重置,默认重置为 0,也可重置为指定的数;可以同时重置多个计数。

    1
    counter-reset: countA, count B 2;
  • counter-increment

    1
    counter-increment: [ <counter-name> <integer>? ]+ | none

    给计数增加给定值,默认每次增加 1,也可指定增加的值;可以同时给多个计数增加给定值

    1
    counter-increment: count A, count B 2;
  • counter-set:

    1
    counter-set: [ <counter-name> <integer>? ]+ | none

    将计数器的值设置为指定的数值,默认为 1;可以同时设置多个计数器的值

    1
    count-set: count 10;

    目前仅 Firefox 支持

  • counter()

    1
    counter( <counter-name>, <counter-style>? )

    按照指定的格式显示计数结果,count-style 默认为 decimal

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    counter(count); // 1, 2, 3, ..., 98, 99, 100

    counter(count, 'decimal-leading-zero'); // 01, 02, 03, ..., 98, 99, 100

    counter(count, 'lower-roman'); // i, ii, iii, ..., xcviii, xcix, c

    counter(count, 'upper-roman'); // I, II, III, ..., XCVIII, XCIX, C

    counter(count, 'lower-alpha'); // a, b, c, ..., z, aa, ab

    counter(count, 'upper-alpha'); // A, B, C, ..., Z, AA, AB

    counter(count, cjk-heavenly-stem); // 甲 乙 丙 丁 戊 己 庚 辛 壬 癸

    counter(count, 'simp-chinese-informal'); // 一 二 三 四 五...

    counter(count, 'simp-chinese-formal'); // 壹 贰 叁 肆 伍...

    counter(count, 'trad-chinese-informal'); // 一 二 三 四 五...

    counter(count, 'trad-chinese-formal'); // 壹 贰 叁 肆 伍...
  • counters()

    1
    counters( <counter-name>, <string>, <counter-style>? )

    counters 用于嵌套计数的场景,用法与 counter() 类似,计数器之间通过指定的字符串连接

    1
    counters(count, '.', 'decimal');

参考