CSS函数那些事（五）计数函数及其实例解析

2024-01-11 15:50:49

CSS计数函数简介
CSS计数函数counter用于创建一个计数器，并返回一个代表计数器当前值的字符串。计数器在文档中是唯一的，这意味着您可以在一个文档中创建多个计数器，每个计数器都有自己的值。

CSS计数函数语法

counter(name, styleName)

name ：代表当前计数器的名称标识，区分大小写。
styleName ：代表递增数字或者字母的种类，可接受的参数为：
- list-style-type：数字或字母，如decimal、lower-alpha、upper-alpha等。
- list-style-position：inside或outside，指定计数器的位置，inside表示计数器显示在列表项目内部，outside表示计数器显示在列表项目外部。

CSS计数函数用法

定义计数器

counter-reset: name;

递增计数器

counter-increment: name;

获取计数器值

counter(name, styleName)

CSS计数函数实例

1. 基本用法

/* 定义计数器 */
counter-reset: counter1;

/* 递增计数器 */
counter-increment: counter1;

/* 获取计数器值 */
content: counter(counter1);

2. 使用不同的计数器样式

/* 定义计数器，并指定计数器样式为罗马数字 */
counter-reset: counter1 list-style-type: lower-roman;

/* 递增计数器 */
counter-increment: counter1;

/* 获取计数器值 */
content: counter(counter1);

3. 将计数器应用于列表

/* 定义计数器，并指定计数器样式为圆圈 */
counter-reset: counter1 list-style-type: circle;

/* 将计数器应用于列表 */
li {
  list-style-position: outside;
  counter-increment: counter1;
}

/* 获取计数器值 */
li::before {
  content: counter(counter1) ". ";
}