[译] CSS 计数器教程

原文连接：A Guide to CSS counter, by Samantha Ming

使用 CSS 计数器属性能够将任何元素转成有序列表，相似 <ol> 的功能。若是你须要为一个页面里的标题元素自动编号或者制做目录，使用它就很是方便了。

下面是它的使用。

div {
  /* 定义 & 初始化一个计数器 */
  counter-reset: tidbit-counter;
}

h2::before {
  /* 设置计数器增量 */
  counter-increment: tidbit-counter;

  /* 显示计数器 */
  content: counter(tidbit-counter) ": ";
}
复制代码

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>
复制代码

最终效果以下：

下面解释计数器属性的工做原理。

计数器属性是如何工做的？

让 CSS 计数器生效，须要三步：

• 定义 & 初始化一个计数器
• 设置计数器增量
• 显示计数器

这里的每一步，对应一个 CSS 属性，因此一共须要 3 个属性的使用，才能完成计数功能的实现。

1、定义 & 初始化计数器

定义计数器

使用 counter-reset 属性定义一个计数器。咱们将计数器命名为 tidbit-counter，这个名字会在以后使用。

counter-reset: tidbit-counter;
复制代码

定义起始计数值

计数器定义完成后，下一步就是定义起始计数值。起始计数值默认为 0。注意，这个数字不会显示，就是个计数器的起始计数值，至关于一个“引子”。若是将它设置为 20，最终输出的序号是从 21 开始的，即 21、22、23……这是假设 计数器增量为 1 的状况下（立刻就会学到这个概念）。

counter-reset	输出
0	一、二、3……
20	2一、2二、23……
58	5九、60、61……

举个例子：

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

h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter) ": ";
}
复制代码

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>
复制代码

显示效果以下：

counter-reset 属性用在谁上面？

counter-reset 属性应该用在父元素上。若是不在父元素上用，就会有问题。

/* ❌ 这样不行 */
h2 {
  counter-reset: tidbit-counter;
}

h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter) ": ";
}
复制代码

下面是渲染效果，会发现设置的计数器增量（counter-increment）并未产生做用。

固然，也不是必须在直接父元素上。只要是计数列表元素的任意包装元素就行。

举个例子：

<section>
  <div>
    <h2>HTML</h2>
    <h2>CSS</h2>
    <h2>JS</h2>
  </div>
</section>
复制代码

/* ✅ 这样也行的 */
section {
  counter-reset: tidbit-counter;
}
复制代码

结果以下：

2、设置计数器增量

计数器设置完成后，就要考虑序号的增长规律是怎样的。这就是靠 counter-increment 属性控制的。下面给出了它的语法：

counter-increment: <counter name> <integer>
复制代码

注意到，counter-increment 接收一个整数参数。表示序号不必定非是按照 1 递增的。下面的表格给出了一些示例（假设的起始计数值为 0）：

counter-increment	输出
1（默认）	一、二、3……
5	五、十、15……
-5	-五、-十、-15……

是的，自增值还能够是个负值！咱们来看看代码是怎么写的。

div {
  counter-reset: tidbit-counter;
}

h2::before {
  counter-increment: tidbit-counter -5; /* 👈 */
  content: counter(tidbit-counter) ": ";
}
复制代码

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>
复制代码

结果以下：

3、显示计数器

最后一步，就是显示计数器了。咱们要在 content 属性中，使用 counter 功能符。content 属性一般被 CSS 用来在 HTML 上显示一些值。下面给了 counter 功能符的语法：

counter(<counter name>, <counter list style>)
复制代码

默认计数是以数字形式显示的。这是 <counter list style> 的默认效果。固然，咱们还能定义其余形式的显示序号。

序号形式	输出
默认	一、二、3……
upper-alpha	A、B、C……
lower-roman	i、ii、iii……
thai	๑、๒、๓……

完整的可用序号形式 参见这里。

咱们举个例子：

div {
  counter-reset: tidbit-counter;
}

h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter, thai); /* 👈 */
}
复制代码

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>
复制代码

渲染效果以下：

多个计数器

固然，咱们也能够同时设置多个计数器，只要多定义一个计数器名称就能够了：

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) ": ";
}
复制代码

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

  <h3>two</h3>
  <h3>two</h3>
</div>
复制代码

效果以下：

嵌套计算器

设置嵌套计数器，用到的就不是 counter 属性，而是 counters 属性。counters 属性多接收了一个字符串参数。

counters(<counter name>, <string>, <counter list style>)
复制代码

第二个 string 参数表示分隔符，指定内外计数器之间采用何种分隔符链接。

**string**	输出
"."	1.一、1.二、1.3……
">"	1>一、1>二、1>3……
":"	1:一、1:二、1:3……

咱们来看个例子：

div {
  counter-reset: multi-counters;
}

h2::before {
  counter-increment: multi-counters;
  content: counters(multi-counters, ".") ": ";
} 
复制代码

<div>
  <h2>Frameworks</h2>
  <div>
    <h2>Vue</h2>
    <h2>React</h2>
    <h2>Angular</h2>
  </div>
</div>
复制代码

效果以下：

Counter VS. <ol>

CSS 计数器并不能代替 <ol>。若是你须要展现一个有序列表，那么最好仍是坚持使用 <ol>，由于使用这个标签更符合语义。语义标签有利于加强可访问性，而且有利于 SEO。

该用

下面给出了应该使用 <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>
复制代码

该用 CSS 计数器

下面这个例子，模拟了会在文档网页里出现的结构：标题标签（对应这里的 h2）和段落元素并列。为了达到视觉上的序号效果，我会选择使用 CSS 计数器。

<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>
复制代码

article {
	counter-reset: hs;
}

h2::before {
  counter-increment: hs;
  content: counter(hs) '. ';
}
复制代码

渲染结果以下：

兼容性

CSS 计数器属性受到包括 IE8+ 在内全部现代浏览器支持，因此能够放心使用。

Can I Use: CSS Counters

资源

• MDN Web Docs: Using CSS counters
• MDN WebDocs: List Style Type
• w3schools: CSS counter-increment
• w3schools: CSS counter-reset
• CSS Tricks: counter-increment
• CSS Tricks: counter-reset
• 30 Seconds of CSS
• Counters and Calc(): Two Little-Known CSS Features Explained
• The Accessibility of ::before and ::after
• Accessiblity support for CSS generated content

感谢阅读！

译者注：我为本文建立一个 codepen 笔记，点击这里 能够看见。

（正文完）

---

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。如今猫舍里养的都是布偶猫。若是你也是个爱猫人士而且有须要的话，不妨扫一扫她的【闲鱼】二维码。不买也没关系，看看也行。

（完）