CSS计数器counter()的用法简介

下面我将详细讲解“CSS计数器counter()的用法简介”。

什么是CSS计数器

CSS计数器是一种特殊的CSS变量，可以用于生成序号，轻松实现一些有趣的排版效果。

如何定义CSS计数器

使用CSS关键字 @counter-style 可以定义一个计数器，例如下面这个例子：

@counter-style my-counter {
  system: decimal;
  symbols: "第", "、";
  suffix: " ";
}

这个计数器名字是 my-counter，system 后面的值表示使用什么计数方法，这里选用的是十进制 decimal。symbols 是用于分隔数字的符号，这里采用了“第”和“、”，suffix 是可选的，表示序号后面跟着什么字符，这里设置为空格。

如何使用CSS计数器

定义好计数器之后，就可以在选择器中使用 counter() 函数来使用计数器。下面是两个示例说明：

示例一

使用计数器生成一系列序号：

ol {
  counter-reset: my-counter; /* 重置计数器 */
  list-style: none; /* 去掉自带的圆点 */
}

li {
  counter-increment: my-counter; /* 计数器自增 */
  padding-left: 30px; /* 增加左侧空白 */
}

li::before {
  content: counter(my-counter); /* 生成序号 */
  display: inline-block;
  width: 20px;
  margin-right: 10px;
}

在这个示例中，我们定义了一个有序列表 ol，并使用 counter-reset 重置计数器（这里是 my-counter）。然后对列表项 li 使用 counter-increment 让计数器自增，并为每个列表项添加左侧的空白。最后使用 li::before 伪元素生成序号，并使用 counter() 函数引用计数器。在 content 属性中使用 counter(my-counter) 表示生成计数器的当前值。

最终效果如下：

第1项 示例文本

第2项 示例文本

第3项 示例文本

示例二

在多级嵌套列表中使用计数器生成复杂的序号：

ol {
  counter-reset: my-counter2; /* 重置计数器 */
  list-style: none; /* 去掉自带的圆点 */
}

li {
  counter-increment: my-counter2; /* 计数器自增 */
  padding-left: 30px; /* 增加左侧空白 */
}

li::before {
  content: counter(my-counter1) "." counter(my-counter2) " "; /* 生成序号 */
  display: inline-block;
  width: 60px;
  margin-right: 10px;
}

ol ol {
  counter-reset: my-counter1; /* 重置第一级计数器 */
}

ol ol li {
  counter-reset: my-counter2; /* 重置第二级计数器 */
  padding-left: 60px; /* 增加左侧空白 */
}

ol ol li::before {
  content: counter(my-counter1) "." counter(my-counter2) " ";
}

在这个示例中，我们定义了一个两级嵌套的有序列表 ol，并分别使用 counter-reset 重置第一级计数器（my-counter1）和第二级计数器（my-counter2）。对于一级列表项 li，我们在 li::before 伪元素中使用 counter(my-counter2) 显示当前的二级计数器，然后使用 counter(my-counter1) 显示当前的一级计数器，并用 . 将它们连接起来。最后在 content 属性中添加一个空格。

对于二级列表项，我们要为它们增加更多的左侧空白，所以将 padding-left 的值设为 60px，然后在 li::before 中显示当前的一级计数器和二级计数器，连接符还是 .。

最终效果如下：

1.1 示例文本

1.2 示例文本

1.3 示例文本

2.1 示例文本

2.2 示例文本

2.3 示例文本

3.1 示例文本

3.2 示例文本

3.3 示例文本

希望这篇Markdown攻略能够帮助你了解CSS计数器的用法。