[译] 教你使用 CSS 计数器

• 原文地址：Using CSS Counters
• 原文做者：Adam Laki
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：sakila1012
• 校对者：snowyyu，ryouaki

教你使用 CSS 计数器

CSS 计数器是咱们能够用特定属性递增或递减的变量。有了它，咱们就能够像在编程语言里面同样，实现一些普通的迭代。

这种方法能够用于一些创造性的解决方案，其中包括代码中一些重复部分的计数。

为了控制你的计数器，你须要 counter-increment 和 counter-increment 属性，以及 counter() 和 counters() 函数。显示不出数值的话这些方法根本没啥用，因此咱们要搭配简单的 content 属性。

特性很简单。好比你有一个无序的列表，你想要计数 li 的项，则须要在 ul 上声明一个计数器，而后就能够在其下的 li 增长它的数值了。

counter-reset 属性

咱们能够用 counter-reset 属性来定义咱们的计数器变量；为此，咱们必须给出任意的名字和可选的开始值。默认的开始值是 0。这个属性是包装器元素。

counter-increment 属性

运用 counter-increment 属性，咱们能够递增或者递减计数器的值。该属性还有一个可选的值，用于指定递增/递减量。

counter() 函数

counter() 函数负责转储。转储的位置是内容属性，由于这是您能够经过 CSS 将数据返回给 HTML 的地方。该函数有两个参数，第一个参数是计数器变量名，第二参数是计数器类型(可选)。

注意： 在CSS中没有任何链接运算符，因此若是你想链接内容属性中的两个值只能使用空格。

counters() 函数

这个函数跟 counter()函数实现一样的功能。主要区别在于用 counter() 你能够像嵌套ul同样把一个计数器插入到另外一个。它有三个参数，第一个是计数器名称，第二个是分隔符，第三个是计数器类型（可选）。

使用场景 #1 - 自动追踪文档条目

当你须要处理一些重复元素的时候，而且你一样想统计他们的数量，那么这个方案会很好用。。

咱们在咱们的 .container 包裹元素建立一个 counter-reset。建立后，咱们为具备问题类名的项目设置一个 counter-increment。最后，咱们用.issues：before 条目的内容属性显示出计数器的值。

详见 Adam Laki (@adamlaki) on CodePen 的 CSS 计数器案例 文章。

使用场景 #2 - 嵌套列表

使用 counters() 函数，咱们能够像在文本编辑器程序那样制做嵌套列表计数器。

详见 Adam Laki (@adamlaki) on CodePen 的嵌套计数器文章。

使用场景 #3 - 计算已经勾选的复选框

使用输入框的：checked 伪类，咱们能够检查复选框是否被选中，选中的话，咱们计数器的数值就会增长。

详见 Adam Laki (@adamlaki) on CodePen 的复选框计数器 文章。

视频总结

Steve Griffith 就这个话题作了一个很好的和内容丰富的整套视频。它涵盖了几乎全部你须要了解的 CSS 计数器。

其余使用案例

1. Šime Vidas 发布了一个 注释很好的示例。
2. Sam Dutton 作了一个有趣的在线计数示例。
3. Gaël 在复杂的层面上为他的名为 a11y.css 的项目使用了这个特性。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。