CSS 计数器

CSS 计数器

CSS 计数器是 CSS3 引入的新特性之一，是一种用于计数的工具，通过使用计数器，可以在 CSS 中实现类似于列表的可视化效果，以及一些特殊符号的插入，如序号、关键字、数字等等。

计数器的使用方法

计数器的使用方法非常简单，使用 counter-reset 定义计数器的名称和初始值，使用 counter-increment 来设置计数器值得增加量，通过 content 属性来将计数器的值插入到页面中。

1. 计数器名称的定义

计数器名称是用于标识每个计数器的字符串，它需要作为 counter-reset 的参数，并被用于 content 定义中。在 counter-reset 函数中，必须先指定计数器的名称，并给计数器初始化。

p{
  counter-reset: section;
}

上面的代码将创建一个计数器，它的名称是 section。这个计数器是在页面中的每个 p 元素的父元素上进行初始化的。在这种情况下计数器的值为 0。

2. 计数器增加量的设置

对于一个指定的名称，计数器通过 counter-increment 函数来进行增加。

p:before{
  counter-increment: section;
  content: counter(section) ". ";
}

counter-increment 函数增加了 section 计数器的值，每当一个 <p> 元素被渲染时，计数器就会增加 1。前面的 content 属性使用 counter() 函数将计数器的值插入到页面中。

3. 强制使用罗马数字

例如，您可以设置一个 chapter 计数器，使它以罗马数字的形式显示，使用 counter() 函数的第二个参数：

body{
  counter-reset: chapter;
}
h1:before{
  counter-increment: chapter;
  content: counter(chapter, upper-roman) ". ";
}

上面的代码将创建一个计数器，并将其名称设置为 chapter。h1 元素删除了前置元素，增加了 chapter 计数器的值，使用 upper-roman 值来显示罗马数字。

通过计数器创建有序列表

我们可以使用计数器来创建具有可视化效果的自定义列表，例如：

ol{
  counter-reset: section;
}
li{
  display: block;
}
li:before{
  content: counter(section) ". ";
  counter-increment: section;
}

我们的 ol 元素被设置为了 counter-reset: section，这将创建一个以 section 为名称的计数器，并将其初始化为 0。使用 li :before，我们可以将计数器的值插入到元素前。

总结

CSS 计数器是非常有用、强大的工具，它可以帮助我们来创建一些很棒的效果。虽然这只是一种非常简单的例子，但它可以通过多个计数器和不同的语法规则进行扩展，包括数字格式，书写方向，以及随意的前缀和后缀等。

CSS 表格 CSS 语法