【CSS】计数器

这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战

计数器Counter

（1）概述

• CSS提供了技术器的宫呢呢个，可以动态的根据元素的数量来设置编号

• 主要包括三个属性：

  • counter-reset
  • counter-increment
  • counter()

• 当然要使用计数器counter，还不止这三个属性，它通常要搭配content属性来进行使用

  • 而content通常在伪元素中使用
  • 因此，计数器也就通常被设置在伪元素里进行使用

下面，我们来看看具体的属性介绍

（2）counter-reset

• reset表示重置，因此这个属性的作用就是将计数器重置，或者说，将计数器初始化
  • 然后重新定义计数器的名称和初始值
• 语法：counter-reset: counterName initialNum
  • counterName：表示计数器的名称
  • initialNum：表示计数器的初始值
    • 为可选项，默认初始值为0
    • 可以是正数、负数、整数、小数（看兼容性了）
  • 可以同时设置多个计数器
    • 即：counter-reset: counterName1 initialNum1 counterName2 initialNum2

（3）counter-increment

• increment表示递增、增量，因此这个属性的作用就是设置计数器的增量值
  • 即，计数器每变化一次，需要增加的数值
• 语法：counter-increment： counterName incrementValue
  • counterName：表示对该计数器设置increment
  • incrementValue：表示每次递增的数值
    • 可选项，默认值为1
    • 当然，允许0、负数
  • 它需要和counter-reset搭配使用，因此，这个属性也可以同时设置多个

（4）counter()、counters()

• counter()函数需要和content属性搭配使用才有效果

  • 使用时，直接将对应的计数器名称传给它就行了

• 语法：content: counter(counterName, style)

  • counterName：就是通过counter-reset设置的计数器名称
  • style：表示计数器递增的属性的类型
    • 即，计数器递增的不一定是数字，还可以是其它的可以用于递增的符号，如字母等
    • 它的属性值可以是list-style-type的属性值
    • 可选项，默认为数字

• counters()函数同counter()，其区别在于counters()适用于嵌套元素，用于嵌套计数

• 语法：content: counters(counterName, separator, style)

  • counterName：表示计数器名称
  • separator：表示嵌套的计数器的分割符号
    • 如1.1、1.2、1-1、1-2等
  • style：同上

（5）实例

• 接下来看看几个例子

  <div class="reset">
      <div class="counter">标题1</div>
      <div class="counter">标题2</div>
      <div class="counter">标题3</div>
  </div>
  

  /* 在 reset 上设置重置计数器 */
  .reset {
      counter-reset: counter;
  }
  
  /* 在计数器的子元素 counter 上设置计数器增量 */
  .counter {
      counter-increment: counter;
  }
  
  /* 在子元素的伪类上使用 counter() */
  .counter:before {
      content: counter(counter);
  }
  

  

  嵌套的：

  <div class="reset">
      <div class="counter">标题1
          <div class="reset">
              <div class="counter">副标题1</div>
              <div class="counter">副标题2
                  <div class="reset">
                      <div class="counter">内容1</div>
                      <div class="counter">内容2</div>
                      <div class="counter">内容3</div>
                  </div>
              </div>
              <div class="counter">副标题3</div>
          </div>
      </div>
      <div class="counter">标题2</div>
      <div class="counter">标题3</div>
  </div>
  

  .reset {
      padding: 0 50px;
      counter-reset: counter;
      background-color: #eee;
  }
  
  .counter {
      counter-increment: counter;
  }
  
  .counter:before {
      content: counter(counter);
  }
  
  

  

  .reset {
      padding: 0 50px;
      counter-reset: counter;
      background-color: #eee;
  }
  
  .counter {
      counter-increment: counter;
  }
  
  .counter:before {
      content: counters(counter, '-');
  }