diff --git a/images/前端杂烩/CSS计数器/counter.png b/images/前端杂烩/CSS计数器/counter.png new file mode 100644 index 0000000..4b6b46c Binary files /dev/null and b/images/前端杂烩/CSS计数器/counter.png differ diff --git a/images/前端杂烩/CSS计数器/counters.png b/images/前端杂烩/CSS计数器/counters.png new file mode 100644 index 0000000..3d7e03f Binary files /dev/null and b/images/前端杂烩/CSS计数器/counters.png differ diff --git a/images/前端杂烩/CSS计数器/有序列表.png b/images/前端杂烩/CSS计数器/有序列表.png new file mode 100644 index 0000000..1d4320e Binary files /dev/null and b/images/前端杂烩/CSS计数器/有序列表.png differ diff --git a/source/_posts/前端杂烩/CSS计数器.md b/source/_posts/前端杂烩/CSS计数器.md new file mode 100644 index 0000000..2e85b71 --- /dev/null +++ b/source/_posts/前端杂烩/CSS计数器.md @@ -0,0 +1,117 @@ +--- +title: CSS计数器 +date: 2022-12-30 14:53:47 +tags: + - 前端 + - css +categories: + - 前端杂烩 +--- + +### 有序列表 +HTML具备原生支持的计数器功能，也就是有序列表`
    ` +```html +
      +
    1. aaa
      2. +
    2. aaa
      3. +
    3. AAA +
      1. bbb
      2. bbb
      +
      4. +
    +``` + +对于有序列表来说，可以去指定`list-style-type`来使用预置的序列，比如字母、罗马数字等，默认是**decimal**(数字) +也可以给`::marker`伪元素指定样式 +```less +ol.roman { + list-style-type: lower-roman; + li::marker { + color: red; + font-size: 20px; + } +} +``` +实际效果如下 +![有序列表](/images/前端杂烩/CSS计数器/有序列表.png) + +这样的有序列表有一定的局限性 +1. 不能指定起始值，每个`
      `当中的`
    1. `都是从1开始的 +2. 不能指定步长，一定是每次递增1 + +### CSS计数器 +如果需要对序列的控制更灵活一些，可以使用`CSS计数器` +```html +
      +
      第一章
      +
      第二章
      +
      第三章
      +
      +``` +```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 +
      +
      第一章 +
      +
      第1节
      +
      第2节 +
      +
      第1小节
      +
      第2小节
      +
      第3小节
      +
      +
      +
      第3节
      +
      +
      +
      第二章
      +
      第三章 +
      +
      第1节
      +
      +
      +
      +``` +```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`隐藏，计数器的值会增加 +这一点与有序列表是一样的