CSS 计数器学习笔记

在CSS中，计数器(counter)是一种可以用来对某些元素进行自动编号的方法。通过使用计数器，你可以方便地实现序号、页码等功能，而不必手动编写序号或页码的数字。

基本语法

使用计数器需要以下两个步骤：

1. 定义计数器(counter)：使用 counter-reset 属性来定义计数器，并设置初始值。
2. 显示计数器内容：使用 counter() 函数来显示计数器的值。

下面是一个简单的例子，演示了如何使用计数器来为一个列表中的项目进行编号：

Copy Code
ol {
  counter-reset: item;
}

li:before {
  content: counter(item) ".";
  counter-increment: item;
}

在上面的例子中，ol 元素的 counter-reset 属性设置了计数器 item 的初始值为 0。然后，在每个 li 元素的 before 伪元素中，使用 content 属性和 counter() 函数来显示计数器的值，并使用 counter-increment 属性来将计数器的值增加 1。

实例

下面是一个更具体的实例，演示了如何使用计数器来为一个章节中的图片进行编号：

Copy Code
<h2>第一章</h2>

<p>这是一张图片：</p>
<img src="example.jpg">

<p>这是另外一张图片：</p>
<img src="example.jpg">

<h2>第二章</h2>

<p>这是第一张图片：</p>
<img src="example.jpg">

<p>这是第二张图片：</p>
<img src="example.jpg">

<style>
  h2 {
    counter-reset: chap;
  }

  img:before {
    content: "图" counter(chap) "-";
    counter-increment: chap;
  }
</style>

在上面的例子中，我们定义了一个计数器 chap，并将其初始值设置为 0。然后，在每个 img 元素的 before 伪元素中，使用 content 属性和 counter() 函数来显示计数器的值，并使用 counter-increment 属性来将计数器的值增加 1。

结果，我们会得到如下的编号：

第一章 图1- 这是一张图片： 图2- 这是另外一张图片：

第二章 图3- 这是第一张图片： 图4- 这是第二张图片：