CSS `counter-set` (提案)：直接设置计数器值，更灵活的列表编号

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊一个CSS新玩意儿——counter-set。这玩意儿啊，说白了，就是让你能更任性地控制列表编号，想从哪儿开始就从哪儿开始，想设成啥数就设成啥数，简直是列表界的“乾坤大挪移”。

一、为啥要搞个counter-set？

在没counter-set之前，咱们用CSS计数器来做列表编号，一般都是这么玩的：

ol {
  counter-reset: my-counter; /* 初始化计数器 */
}

li::before {
  counter-increment: my-counter; /* 每次递增计数器 */
  content: counter(my-counter) ". "; /* 显示计数器值 */
}

这段代码很简单，就是定义了一个名为my-counter的计数器，然后在每个<li>元素前面显示计数器的值，并且每次递增。

但是！问题来了。如果我们想让某个列表项的编号直接从一个特定的值开始，或者想在列表的中间突然跳到另一个编号，那可就麻烦了。以前的做法要么是改HTML结构，要么是用JavaScript，总之就是不优雅。

counter-set的出现，就是为了解决这个问题，让你用CSS就能轻松搞定各种奇葩的列表编号需求。

二、counter-set的基本用法

counter-set属性允许你直接设置计数器的值。它的语法很简单：

counter-set: <counter-name> <integer>?;

<counter-name>: 计数器的名字，和counter-reset以及counter-increment里用的名字一样。
<integer>: 可选的整数值，表示你想把计数器设置成什么值。如果省略这个值，计数器会被设置为0。

举个例子，假设我们想让一个列表从编号5开始：

<ol>
  <li>Item 1</li>
  <li style="counter-set: my-counter 4;">Item 2</li>
  <li>Item 3</li>
</ol>

ol {
  counter-reset: my-counter;
}

li::before {
  counter-increment: my-counter;
  content: counter(my-counter) ". ";
}

在这个例子中，我们给第二个<li>元素设置了counter-set: my-counter 4;，这意味着，当渲染到这个<li>时，my-counter的值会被直接设置为4。因为后面的<li>元素会继续递增计数器，所以整个列表的编号会是：1, 5, 6。

三、counter-set的进阶用法

counter-set可不只是能设置一个计数器，它还能同时设置多个计数器，而且还能设置为none。

设置多个计数器

你可以用空格分隔多个计数器，每个计数器后面跟一个可选的整数值。例如：

counter-set: counter1 10 counter2 20 counter3; /* counter3的值会被设置为0 */

设置为 none

如果你想取消某个元素的计数器设置，可以把counter-set设置为none。这会阻止该元素及其子元素修改任何计数器的值。

counter-set: none;

四、counter-set、counter-reset和counter-increment的区别与联系

这三个属性都是用来控制CSS计数器的，但它们的功能各不相同：

属性	功能
`counter-reset`	初始化计数器。它会在元素上创建一个新的计数器，或者将已存在的计数器重置为初始值（默认为0）。
`counter-increment`	递增计数器。它会在每次遇到元素时，将指定的计数器增加一个值（默认为1）。
`counter-set`	直接设置计数器的值。它会覆盖计数器当前的值，将其设置为指定的值。

它们之间的联系在于，它们都使用相同的计数器名称，并且共同控制着计数器的行为。

五、counter-set的应用场景

counter-set的应用场景非常广泛，只要你需要对列表进行灵活的编号控制，它就能派上用场。

自定义列表起始编号

正如我们前面看到的例子，你可以用counter-set来设置列表的起始编号，让列表从任意数字开始。

在列表中间跳过某些编号

有时候，你可能需要在列表中间跳过某些编号，例如，你可能想让列表的编号从1到3，然后跳到7，再继续递增。

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li style="counter-set: my-counter 6;">Item 4</li>
  <li>Item 5</li>
</ol>

在这个例子中，第四个<li>元素设置了counter-set: my-counter 6;，这意味着，当渲染到这个<li>时，my-counter的值会被直接设置为6。因为后面的<li>元素会继续递增计数器，所以整个列表的编号会是：1, 2, 3, 7, 8。

创建复杂的嵌套列表

在嵌套列表中，你可能需要对不同层级的列表进行不同的编号控制。counter-set可以让你轻松地实现这种需求。

<ol>
  <li>Item 1</li>
  <li>Item 2
    <ol>
      <li>Subitem 1</li>
      <li style="counter-set: sub-counter 9;">Subitem 2</li>
      <li>Subitem 3</li>
    </ol>
  </li>
  <li>Item 3</li>
</ol>

ol {
  counter-reset: my-counter sub-counter;
}

ol > li::before {
  counter-increment: my-counter;
  content: counter(my-counter) ". ";
}

ol ol > li::before {
  counter-increment: sub-counter;
  content: counter(sub-counter) ". ";
}

在这个例子中，我们定义了两个计数器：my-counter用于控制外层列表的编号，sub-counter用于控制内层列表的编号。我们给内层列表的第二个<li>元素设置了counter-set: sub-counter 9;，这意味着，当渲染到这个<li>时，sub-counter的值会被直接设置为9。

实现分页效果

你可以用counter-set来实现分页效果，让每个页面上的列表都从1开始编号。

<div class="page">
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>
</div>

<div class="page" style="counter-set: my-counter 0;">
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>
</div>

ol {
  counter-reset: my-counter;
}

li::before {
  counter-increment: my-counter;
  content: counter(my-counter) ". ";
}

在这个例子中，我们给第二个.page元素设置了counter-set: my-counter 0;，这意味着，当渲染到这个.page元素时，my-counter的值会被重置为0。因此，第二个页面上的列表会从1开始编号。

六、counter-set的浏览器兼容性

虽然counter-set很强大，但它的浏览器兼容性还不是很好。截至目前（2023年10月），只有一部分现代浏览器支持它。在使用counter-set之前，最好先检查一下目标浏览器的兼容性，或者使用一些polyfill来提供兼容性支持。

七、实战演练：制作一个自定义编号的食谱列表

咱们来做一个稍微复杂一点的例子，用counter-set制作一个自定义编号的食谱列表。假设我们的食谱分为几个步骤，其中有些步骤是可选的，我们想让可选步骤的编号用字母表示，而必选步骤的编号用数字表示。

<ol class="recipe">
  <li class="required">准备食材</li>
  <li class="required">处理食材</li>
  <li class="optional" style="counter-set: step-counter 25;">加入调料</li>
  <li class="required">烹饪</li>
  <li class="optional">摆盘</li>
  <li class="required">享用美食</li>
</ol>

.recipe {
  counter-reset: step-counter;
  list-style: none; /* 移除默认的列表样式 */
  padding-left: 0; /* 移除默认的缩进 */
}

.recipe > li {
  margin-bottom: 10px;
}

.recipe > li::before {
  counter-increment: step-counter;
  display: inline-block;
  width: 2em;
  text-align: right;
  margin-right: 0.5em;
}

.recipe > li.required::before {
  content: counter(step-counter) ". ";
}

.recipe > li.optional::before {
  content: counter(step-counter, lower-alpha) ". "; /* 使用lower-alpha格式 */
}

在这个例子中，我们定义了一个名为step-counter的计数器，用于控制食谱步骤的编号。我们给.required类别的步骤使用数字编号，给.optional类别的步骤使用小写字母编号。我们还用counter-set给第三个步骤设置了初始值，让它从字母"y"开始编号。

八、总结

counter-set是一个非常强大的CSS属性，它可以让你更灵活地控制列表编号，实现各种奇葩的编号需求。虽然它的浏览器兼容性还不是很好，但随着时间的推移，相信会有越来越多的浏览器支持它。掌握了counter-set，你就可以在列表编号的世界里自由驰骋，创造出各种令人惊艳的效果。

好了，今天的讲座就到这里，感谢各位的收看！希望大家能多多练习，熟练掌握counter-set，让你的列表编号更加精彩！下次再见！

发表回复 取消回复

发表回复取消回复