CSS 计数器指南 CSS 计数器指南

2025-06-07

CSS 计数器指南

CSS 指南counter

CSS 指南counter

SamanthaMing.com 的代码小贴士

使用“counter”属性可以将任何元素转换为编号列表。类似于有序列表标签的工作原理<ol>。如果您正在创建文档网站，需要自动对标题进行编号或创建目录，这将非常有用👍



div {
  /* Define & Initialize Counter */
  counter-reset: tidbit-counter;
}

h2::before {
  /* Increment Counter */
  counter-increment: tidbit-counter;

  /* Display Counter */
  content: counter(tidbit-counter) ": ";
}
Enter fullscreen mode Exit fullscreen mode 


<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>
Enter fullscreen mode Exit fullscreen mode

计数器属性如何工作

让计数器工作有三个步骤：

  1. 定义并初始化计数器
  2. 增量计数器
  3. 展示柜台

1. 定义并初始化计数器

此步骤分为两部分。您需要定义计数器并为其命名。

1a. 定义计数器，
我已经命名了它tidbit-counter。我们给它起个名字，以便在后面的步骤中调用它。



counter-reset: tidbit-counter;
Enter fullscreen mode Exit fullscreen mode

1b.初始化计数器

下一步是初始化你的计数器。默认情况下，它的值为0。注意，这个数字不会显示出来。这只是你设置计数器“起始值”的地方。所以，如果我把这个数字设置为20，那么我的输出就会是21, 22, 23...etc。假设我的增量为1（稍后会详细介绍）。

counter-reset 输出
0 1、2、3……等等
20 21、22、23……等等
58 59、60、61……等等

以下是一个例子：



div {
  counter-reset: tidbit-counter 58; /* 👈 */
}

h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter) ": ";
}
Enter fullscreen mode Exit fullscreen mode 


<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>
Enter fullscreen mode Exit fullscreen mode 


59: HTML
60: CSS
61: JS
Enter fullscreen mode Exit fullscreen mode

在哪里应用该counter-reset属性？

您希望将该counter-reset属性应用于父元素。如果您不将其应用于父元素，则会发生以下情况。



/* ❌ Wrong */
h2 {
  counter-reset: tidbit-counter;
}

h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter) ": ";
}
Enter fullscreen mode Exit fullscreen mode

这是输出。正如你所注意到的，它没有正确递增 🙁



1: HTML
1: CSS
1: JS
Enter fullscreen mode Exit fullscreen mode

而且，它不必是直接父级。只要它是一个包裹计数器列表的 HTML 元素就可以了。就像这样：



<section>
  <div>
    <h2>HTML</h2>
    <h2>CSS</h2>
    <h2>JS</h2>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode 


/* ✅ This works */
section {
  counter-reset: tidbit-counter;
}
Enter fullscreen mode Exit fullscreen mode 


1: HTML
2: CSS
3: JS
Enter fullscreen mode Exit fullscreen mode

2. 增量计数器

设置好计数器后，就可以开始增加它了。此属性的语法如下：



counter-increment: <counter name> <integer>
Enter fullscreen mode Exit fullscreen mode

正如您所注意到的，它接受一个整数参数。这意味着您不仅限于将计数器值增加1。下图假设counter-reset为0。

counter-increment 输出
1（默认值） 1、2、3……等等
5 5、10、15……等等
-5 -5、-10、-15...等等

是的，你也可以传入一个负整数来减少计数器。好吧，我们来看看如何实现：



div {
  counter-reset: tidbit-counter;
}

h2::before {
  counter-increment: tidbit-counter -5; /* 👈 */
  content: counter(tidbit-counter) ": ";
}
Enter fullscreen mode Exit fullscreen mode 


<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>
Enter fullscreen mode Exit fullscreen mode 


-5: HTML
-10: CSS
-15: JS
Enter fullscreen mode Exit fullscreen mode

3. 展示柜台

最后，为了显示计数器，我们需要将counter函数作为属性的值传递content。content属性通常是我们通过 CSS 在 HTML 中显示值的方式。以下是函数的语法counter。



counter(<counter name>, <counter list style>)
Enter fullscreen mode Exit fullscreen mode

默认情况下，我们一直在处理数字。这就是默认设置，counter list style或者在文档中，他们称之为style。但你也可以传入其他styles。

style 输出
默认 1、2、3……等等
上阿尔法 A、B、C...等
小写罗马字母 i、ii、iii……等等
泰国 ๑、๒、๓...等

您可以在此处查看完整的样式列表

我们来看一个例子：



div {
  counter-reset: tidbit-counter;
}

h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter, thai); /* 👈 */
}
Enter fullscreen mode Exit fullscreen mode 


<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>
Enter fullscreen mode Exit fullscreen mode 


๑HTML
๒CSS
๓JS
Enter fullscreen mode Exit fullscreen mode

多个计数器

您还可以通过简单地定义另一个计数器名称来设置多个计数器。



div {
  counter-reset: counter-one counter-two 100; /* 👈 */
}

h2::before {
  counter-increment: counter-one;
  content: counter(counter-one) ": ";
} 

h3::before {
  counter-increment: counter-two;
  content: counter(counter-two) ": ";
}
Enter fullscreen mode Exit fullscreen mode 


<div>
  <h2>one</h2>
  <h2>one</h2>

  <h3>two</h3>
  <h3>two</h3>
</div>
Enter fullscreen mode Exit fullscreen mode 


1: one
2: one

101: two
102: two
Enter fullscreen mode Exit fullscreen mode

嵌套计数器

您还可以设置嵌套计数器。不要使用counter，而是使用复数形式counters。它counters接受一个附加参数：



counter(<counter name>, <string>, <counter list style>)
Enter fullscreen mode Exit fullscreen mode

字符串参数是一个字符串分隔符，用于指示如何分隔嵌套计数器的列表项。

string 输出
"." 1.1、1.2、1.3……等等
">" 1>1、1>2、1>3...等
":" 1:1、1:2、1:3……等等

让我们看一个例子：



div {
  counter-reset: multi-counters;
}

h2::before {
  counter-increment: multi-counters;
  content: counters(multi-counters, ".") ": ";
}
Enter fullscreen mode Exit fullscreen mode 


<div>
  <h2>Frameworks</h2>
  <div>
    <h2>Vue</h2>
    <h2>React</h2>
    <h2>Angular</h2>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode 


1: Frameworks
  1.1: Vue
  1.2: React
  1.3: Angular
Enter fullscreen mode Exit fullscreen mode

对抗<ol>

CSS 计数器不能取代<ol>。如果您有一个按编号排序的列表，那么您绝对应该继续使用，<ol>因为使用正确的语义来构建 HTML 非常重要。语义标记对于可访问性和 SEO 至关重要。

<ol>为了胜利

下面是一个我应该使用的例子<ol>。在这个例子中，我只是列出了一些规则。使用有序列表在语义上是合理的<ol>。



<h2>Rules</h2>

<ol>
  <li>You do not talk about Fight Club</li>
  <li>You do not talk about Fight Club</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

CSScounter获胜

下面是一个我会使用 CSS 的示例。在本例中，我有一个使用标题和段落的counter文档页面。在这个例子中，计数器更有利于视觉呈现。这个示例使用 CSS 更有意义。h2pcounter



<article>
  <h2>What is Vue.js?</h2>
  <p>Vue is a progressive framework for building user interfaces.</p>

  <h2>Getting Started</h2>
  <p>Visit Vuejs.org to learn more!</p>
</article>
Enter fullscreen mode Exit fullscreen mode 


1: What is Vue.js?
Vue is a progressive framework for building user interfaces.

2: Getting Started
Visit Vuejs.org to learn more!
Enter fullscreen mode Exit fullscreen mode

☝️你能看出我真的很喜欢 Vue.js 吗😝

浏览器支持

counter所有主流浏览器都支持CSS，包括 Internet Explorer 8 及更高版本。

我可以使用：CSS 计数器

资源

感谢阅读❤
打个招呼！Instagram | Twitter | Facebook | Medium |博客

文章来源：https://dev.to/samanthaming/a-guide-to-css-counter-3aaa
Devto 翻译
PREV
如何在开发人员面试中脱颖而出
NEXT
JavaScript 中 Spread 与数组的 6 个用例