CSS计数器

总字数 907

预计阅读时间 4 分钟

有序列表

HTML具备原生支持的计数器功能，也就是有序列表<ol>

<ol class="normal">
  <li>aaa</li>
  <li>aaa</li>
  <li>AAA
    <ol class="roman"><li>bbb</li><li>bbb</li></ol>
  </li>
</ol>

对于有序列表来说，可以去指定list-style-type来使用预置的序列，比如字母、罗马数字等，默认是decimal(数字)
也可以给::marker伪元素指定样式

ol.roman {
  list-style-type: lower-roman;
  li::marker {
    color: red;
    font-size: 20px;
  }
}

实际效果如下

这样的有序列表有一定的局限性

1. 不能指定起始值，每个<ol>当中的<li>都是从1开始的
2. 不能指定步长，一定是每次递增1

CSS计数器

如果需要对序列的控制更灵活一些，可以使用CSS计数器

<div class="container">
  <div class="counter">第一章</div>
  <div class="counter">第二章</div>
  <div class="counter">第三章</div>
</div>

.container {
  counter-reset: counter1 0;
  > .counter::before {
    counter-increment: counter1 1;
    content: counter(counter1,decimal) '. ';
  }
}

效果如下

1. counter-reset代表在这个层级重置指定计数器的值，默认置为0。可以指定多个例如counter-reset: counter1 0 counter2 10
   无论在何处，只要有它，对应的计数器的值都会重置，所以通常会将它给到列表的父元素
2. counter-increment代表计数器增加，默认增加1。与counter-reset类似也可以指定多个
   无论在何处，只要有它，对应的计数器的值都会增加，所以通常会将它给到列表的子元素
3. counter函数指定使用该计数器，可以用于伪元素的content，它相当于是执行输出
   这个函数可以有2个参数counter(name,style)，style就是跟list-style-type一样，可以指定不同的序号风格

嵌套计数

实际使用当中我们可以用计数器生成目录树结构
可能需要有多个层级
但是如果层级数量是不确定的，基本的计数器就无法满足了，这种情况下就需要用到嵌套计数

<div class="reset">
  <div class="counters">第一章
    <div class="reset">
      <div class="counters">第1节</div>
      <div class="counters">第2节
        <div class="reset">
          <div class="counters">第1小节</div>
          <div class="counters">第2小节</div>
          <div class="counters">第3小节</div>
        </div>
      </div>
      <div class="counters">第3节</div>
    </div>
  </div>
  <div class="counters">第二章</div>
  <div class="counters">第三章
    <div class="reset">
      <div class="counters">第1节</div>
    </div>
  </div>
</div>

.reset {
  padding-left: 20px;
  counter-reset: counter2;
  .counters::before {
    counter-increment: counter2;
    content: counters(counter2, '-') '. ';
    font-weight: bold;
  }
}

效果如下

与基本计数器的区别就在于使用counters函数，形式为counters(name, string, style)
name和style与基本计数器中的含义相同，string为拼接使用的字符串

其他特性

如果其中存在使用display:none隐藏掉元素，则计数器的值不会增加
实际显示的序列仍然是正确的
如果使用visibility:hidden隐藏，计数器的值会增加
这一点与有序列表是一样的