counter-reset

counter-reset

用于穿梭框或者多级列表等等

这是elementui的穿梭款。前面递增的数字就可以使用counter-reset

这里只写使用，详情看这篇文章

地址：https://www.cnblogs.com/xiaofenguo/p/6074143.html

使用

CSS计数器只能跟content属性在一起的时候才有作用

1. counter-reset: name

计数器的名字，这里可以写第二个参数（当成起始值）

2. counter-increment: name 1

计数器名字 （第一个参数）

变化值（第二个参数，默认为1，递增写正数，递减写负数）

3. counter(name)

只嵌套一层

看成内容输出值就可以了。

4. counters(name, string)

多级嵌套，第二个参数为拼接的字符串

嵌套列表

<div>
    <dl class="row">
      <dd class="col">🦊</dd>
      <dd class="col">🐒</dd>
      <dd class="col">🐺</dd>
      <dd class="col">🐴</dd>
    </dl>
</div>

.row {
    counter-reset: number;
}
.row .col::before {
    counter-increment: number 1;
    content: counter(number) ".";
  }
}

效果

多级嵌套列表

<div>
    <dl class="row">
      <dd class="col">🐴</dd>
      <dd class="col">
        🐕
        <dl class="row">
          <dd class="col">🦮</dd>
          <dd class="col">🐕‍🦺</dd>
        </dl>
      </dd>
      <dd class="col">🐺</dd>
    </dl>
</div>

.row {
    counter-reset: number;
}
.row .col::before  {
    counter-increment: number 1;
    content: counters(number, "-") ".";
  }
}

效果

---

补充：

这里写html的有个注意点，一个容器出现两个reset顺序就会错乱

  <div>
    <dl class="row">
      <dd class="col">🐴</dd>
      <dl class="row">
        <dd class="col">🦮</dd>
        <dd class="col">🐕‍🦺</dd>
      </dl>
      <dd class="col">🐺</dd>
    </dl>
  </div>