[译] CSS 计数器教程

zhangbao90s
658 阅读6分钟

原文链接：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>

最终效果如下：

image.png

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

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

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

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

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

一、定义 & 初始化计数器

定义计数器

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

counter-reset: tidbit-counter;

定义起始计数值

计数器定义完成后，下一步就是定义起始计数值。起始计数值默认为 0。注意，这个数字不会显示，就是个计数器的起始计数值，相当于一个“引子”。如果将它设置为 20，最终输出的序号是从 21 开始的，即 21、22、23……这是假设 计数器增量为 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) ": ";
}

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>

显示效果如下：

image.png

counter-reset 属性用在谁上面？

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

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

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

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

image.png

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

举个例子：

<section>
  <div>
    <h2>HTML</h2>
    <h2>CSS</h2>
    <h2>JS</h2>
  </div>
</section>

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

结果如下：

image.png

二、设置计数器增量

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

counter-increment: <counter name> <integer>

注意到，counter-increment 接收一个整数参数。表示序号不一定非是按照 1 递增的。下面的表格给出了一些示例（假设的起始计数值为 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) ": ";
}

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>

结果如下：

image.png

三、显示计数器

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

counter(<counter name>, <counter list style>)

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

序号形式 输出
默认 1、2、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>

渲染效果如下：

image.png

多个计数器

当然，我们也可以同时设置多个计数器，只要多定义一个计数器名称就可以了：

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>

效果如下：

image.png

嵌套计算器

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

counters(<counter name>, <string>, <counter list style>)

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

**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, ".") ": ";
} 

<div>
  <h2>Frameworks</h2>
  <div>
    <h2>Vue</h2>
    <h2>React</h2>
    <h2>Angular</h2>
  </div>
</div>

效果如下：

image.png

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) '. ';
}

    渲染结果如下：

    image.png

    兼容性

    CSS 计数器属性受到包括 IE8+ 在内所有现代浏览器支持，所以可以放心使用。

    Can I Use: CSS Counters

    资源

    感谢阅读！

    译者注：我为本文创建一个 codepen 笔记，点击这里 可以看见。

    （正文完）

    广告时间（长期有效）

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

    （完）

    avatar
    文章
    阅读
    粉丝