CSS计数器

source/_posts/前端杂烩/CSS计数器.md

@@ -0,0 +1,117 @@
+---
+title: CSS计数器
+date: 2022-12-30 14:53:47
+tags: 
+  - 前端
+  - css
+categories: 
+  - 前端杂烩
+---
+
+### 有序列表
+HTML具备原生支持的计数器功能，也就是有序列表`<ol>`
+```html
+<ol class="normal">
+  <li>aaa</li>
+  <li>aaa</li>
+  <li>AAA
+    <ol class="roman"><li>bbb</li><li>bbb</li></ol>
+  </li>
+</ol>
+```
+<!-- more -->
+对于有序列表来说，可以去指定`list-style-type`来使用预置的序列，比如字母、罗马数字等，默认是**decimal**(数字)
+也可以给`::marker`伪元素指定样式
+```less
+ol.roman {
+  list-style-type: lower-roman;
+  li::marker {
+    color: red;
+    font-size: 20px;
+  }
+}
+```
+实际效果如下
+![有序列表](/images/前端杂烩/CSS计数器/有序列表.png)
+
+这样的有序列表有一定的局限性
+1. 不能指定起始值，每个`<ol>`当中的`<li>`都是从1开始的
+2. 不能指定步长，一定是每次递增1
+
+### CSS计数器
+如果需要对序列的控制更灵活一些，可以使用`CSS计数器`
+```html
+<div class="container">
+  <div class="counter">第一章</div>
+  <div class="counter">第二章</div>
+  <div class="counter">第三章</div>
+</div>
+```
+```less
+.container {
+  counter-reset: counter1 0;
+  > .counter::before {
+    counter-increment: counter1 1;
+    content: counter(counter1,decimal) '. ';
+  }
+}
+```
+效果如下
+![counter](/images/前端杂烩/CSS计数器/counter.png)
+
+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**一样，可以指定不同的序号风格
+
+#### 嵌套计数
+实际使用当中我们可以用计数器生成目录树结构
+可能需要有多个层级
+但是如果层级数量是不确定的，基本的计数器就无法满足了，这种情况下就需要用到`嵌套计数`
+
+```html
+<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>
+```
+```less
+.reset {
+  padding-left: 20px;
+  counter-reset: counter2;
+  .counters::before {
+    counter-increment: counter2;
+    content: counters(counter2, '-') '. ';
+    font-weight: bold;
+  }
+}
+```
+效果如下
+![counters](/images/前端杂烩/CSS计数器/counters.png)
+与基本计数器的区别就在于使用`counters`函数，形式为`counters(name, string, style)`
+name和style与基本计数器中的含义相同，**string**为拼接使用的字符串
+
+#### 其他特性
+如果其中存在使用`display:none`隐藏掉元素，则计数器的值不会增加
+实际显示的序列仍然是正确的
+如果使用`visibility:hidden`隐藏，计数器的值会增加
+这一点与有序列表是一样的