CSS 计数器

简介

• counter-reset：新建或重置一个计数器。
• counter-increment：指定计数器的值加1。
• counter()：取出指定计数器的值。

counter-reset：counterName;
counter-increment: counterName;
counter(counterName);

下面是一个例子。

ul{
  counter-reset: section;
}
li{
  list-style-type: none;
  counter-increment: section;
}
li:before{
  content: counters(section, '-') '.';
}

counter-reset

counter-reset属性新建或重置计数器。计数器的值默认为0。

可以使用第二个参数，修改计数器的默认值。

counter-reset: count -1;

上面示例将计数器的默认值设为-1。

可以在一条语句里面，同时新建多个计数器。

counter-reset: counter1 1 counter2 4;
counter-reset: chapter section 1 page;

上面示例，第一行新建了两个计数器，第二行新建了三个计数器，并且计数器section的默认值设为1。

如果这个属性的值设为none，则表示不重置计数器，可以用来取消上层规则的设置。

counter-increment

counter-increment属性默认将计数器的值加1，但也可以使用第二个值，指定变化的幅度。

counter-increment: counter-name -1;

上面示例表示将计数器的值减1。

可以在一条counter-increment语句里面，同时改变多个计数器。

counter-increment: counter1 1 counter2 -4;

counter-increment: chapter section 2 page;

上面示例的第一行，计数器counter1增加1，计数器counter2减去4。第二行，计数器chapter和page增加1，计数器section增加2。

如果这个属性设为none，表示不改变计数器的值。

counter()

counter()还有可选的第二个参数，设置计数器的值样式，默认是阿拉伯数字。

counter(countername, upper-roman)；

上面示例将计数器的值样式设为大写的罗马数字。

常用的样式值如下。

• decimal-leading-zero：数字带有前导0。
• lower-roman：小写的罗马数字。
• upper-roman：大写的罗马数字。
• lower-alpha：小写的英文字母。
• upper-alpha：大写的英文字母。

也可以使用@counter-style定义自己的规则。

@counter-style winners-list {
  system: fixed;
  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
  suffix: " ";
}

上面示例是金牌、银牌、铜牌的计数符号。

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

ul {
  list-style: thumbs;
}

上面示例是将列表符号变成点赞。

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

.items {
  list-style: circled-alpha;
}

上面示例将列表符号变成带圈的英文字母。

counters()

counters()用来取出计数器的值，并且指定多重计数器之间的连接字符。

counters(name, strings, style);

它与counter()的不同是多了一个strings参数，表示子序号的连接字符串。

counters(countername, '-');
counters(countername, '.', upper-roman);

上面示例第一行中，计数器与子计数器的连接符号为-。第二行为小数点。