利用CSS counter属性动态展示编号，让排版更加轻松

2024-01-16 20:39:27

前言

您一定遇到过这样的排版，如实现步骤条、给文章编号等。如果写固定的编号，增删步骤或者章节时，后续的编号都需要手动更改。这样会很麻烦。

CSS提供了计数器功能，可以动态设置编号。

CSS计数器

CSS计数器是一种用于在CSS中创建和管理计数器的机制。计数器可以用于生成编号、跟踪元素的个数或其他类似的任务。

要使用CSS计数器，您需要先使用counter-reset属性来初始化计数器。counter-reset属性可以设置计数器的初始值，并将其与一个唯一的名称相关联。例如，以下代码将创建一个名为step-counter的计数器，并将其初始值设置为1：

counter-reset: step-counter 1;

接下来，您就可以使用counter-increment属性来递增计数器的值。counter-increment属性可以将计数器的值增加一个指定的数字。例如，以下代码将将step-counter计数器的值增加1：

counter-increment: step-counter 1;

最后，您可以使用counter属性来获取计数器的值。counter属性可以将计数器的值插入到HTML元素中。例如，以下代码将把step-counter计数器的值插入到<p>元素中：

<p>Step <counter(step-counter)>: Do something</p>

应用示例

1. 步骤条

步骤条是常见的排版元素，通常用于列出需要完成的任务或步骤。我们可以使用CSS计数器来轻松实现步骤条。

首先，我们需要创建一个<ol>元素来包含步骤条中的项目。然后，我们可以使用counter-reset属性来初始化一个名为step-counter的计数器，并将它的初始值设置为1。接下来，我们可以使用counter-increment属性来递增计数器的值，并使用counter属性来获取计数器的值，并将其插入到<li>元素中。

以下是一个简单的步骤条示例：

<ol>
  <li>Step <counter(step-counter)>: Do something</li>
  <li>Step <counter(step-counter)>: Do something else</li>
  <li>Step <counter(step-counter)>: Do something even else</li>
</ol>

ol {
  counter-reset: step-counter 1;
}

li {
  counter-increment: step-counter 1;
}

li:before {
  content: "Step " counter(step-counter) ": ";
}

2. 文章编号

文章编号也是常见的排版元素，通常用于对文章中的章节或段落进行编号。我们可以使用CSS计数器来轻松实现文章编号。

首先，我们需要创建一个<ol>元素来包含文章中的章节或段落。然后，我们可以使用counter-reset属性来初始化一个名为chapter-counter的计数器，并将它的初始值设置为1。接下来，我们可以使用counter-increment属性来递增计数器的值，并使用counter属性来获取计数器的值，并将其插入到<li>元素中。

以下是一个简单的文章编号示例：

<ol>
  <li>Chapter <counter(chapter-counter)>: Introduction</li>
  <li>Chapter <counter(chapter-counter)>: Body</li>
  <li>Chapter <counter(chapter-counter)>: Conclusion</li>
</ol>

ol {
  counter-reset: chapter-counter 1;
}

li {
  counter-increment: chapter-counter 1;
}

li:before {
  content: "Chapter " counter(chapter-counter) ": ";
}