css计数器

以前写列表的时候，都是在前面手动添加序号标识是第几个。没想到用 css 计数器可以完成相应的工作了。

先来一个实例：

ol {
    counter-reset: section;
    list-style: none;
}
li::before {
    counter-increment: section;
    content: counter(section) ".";
}

<ol>
    <li>css counter</li>
    <li>css counter</li>
    <li>css counter</li>
    <li>css counter</li>
    <li>css counter</li>
</ol>

结果如下

可以看到每个li元素前自动添加了编号。

二、相关属性说明

• counter-reset: 用于将计数器的值重置为给定的值。默认为0；

  /* 计数器名字为section 初始值为0 */
  counter-reset: section;
  /* 计数器名字为section 初始值为2 */
  counter-reset: section 2;
  

• counter-increment: 用于将计数器的值增加给定的值，默认为1；可以同时使用多个计数器；步长可以为负数。

  /* section的值增加1 */
  counter-increment: section;
  /* section的值增加2 */
  counter-increment: section 2;
  /* section section2的值都增加1 */
  counter-increment: section section2;
  /* section的值都增加2， section2的值都增加1 */
  counter-increment: section 2 section2;
  

• counter(): 用来获取计数器的值

  content: counter(section);
  content: counter(section);
  

• counters:跟counter的区别是可以在不同级别的计数器之前插入字符串，必须指定第二个参数，否则不会生效。

  /* 第二个参数指定嵌套的链接符 */
  content: counters(section, ".");
  

counter可以指定第二个参数，counters可以指定第三个参数，用来设置显示风格。

作用域

计数器的效果跟作用域有关，元素设置了counter-reset之后，子元素都属于这个作用域，直到某个子元素重置了这个计数器，该子元素的子元素就开始重新计数。

ol {
    counter-reset: section;
}

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

<ol>
    <li>css counter</li>
    <li>css counter</li>
    <li>css counter</li>
    <li>css counter</li>
    <ol>
        <li>css counter</li>
        <li>css counter</li>
        <li>css counter</li>
        <li>css counter</li>
        <li>css counter</li>
    </ol>
</ol>

第二个ol标签重置了计数器，他下面的元素开始重新计数。

counters

下面的代码跟上面的代码不同的地方在于使用了 counters替换了counter

        ol {
            counter-reset: section;
            list-style: none;
        }

        li::before {
            content: counters(section, "_") ".";
            counter-increment: section;
        }

<ol>
    <li>css counter</li>
    <li>css counter</li>
    <li>css counter</li>
    <li>css counter</li>
    <ol>
        <li>css counter</li>
        <li>css counter</li>
        <li>css counter</li>
        <li>css counter</li>
        <li>css counter</li>
    </ol>
</ol>

效果如下：

上面拼接了计数器section，就行成了文章目录的结构。

应用场景：

1. 显示文章目录结构
2. 统计数据总数， 统计文章中某种特定元素出现的次数。
   
3. 统计选择的数据条数
   很多UI框架checkobox、radio的选中状态都是根据伪元素来设置的，可以在里面添加counter-increment，最后用元素展示出来。