From 643ee785d90a7f29854b08f916f299b90316eb1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=81=8C=E7=B3=96=E5=8C=85=E5=AD=90?= Date: Fri, 30 Dec 2022 16:00:19 +0800 Subject: [PATCH] =?UTF-8?q?CSS=E8=AE=A1=E6=95=B0=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- images/前端杂烩/CSS计数器/counter.png | Bin 0 -> 3451 bytes images/前端杂烩/CSS计数器/counters.png | Bin 0 -> 13087 bytes images/前端杂烩/CSS计数器/有序列表.png | Bin 0 -> 3204 bytes source/_posts/前端杂烩/CSS计数器.md | 117 +++++++++++++++++++++++++ 4 files changed, 117 insertions(+) create mode 100644 images/前端杂烩/CSS计数器/counter.png create mode 100644 images/前端杂烩/CSS计数器/counters.png create mode 100644 images/前端杂烩/CSS计数器/有序列表.png create mode 100644 source/_posts/前端杂烩/CSS计数器.md diff --git a/images/前端杂烩/CSS计数器/counter.png b/images/前端杂烩/CSS计数器/counter.png new file mode 100644 index 0000000000000000000000000000000000000000..4b6b46cf4af4ca5cb83635fee137c88a08986340 GIT binary patch literal 3451 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 AZ~y=R literal 0 HcmV?d00001 diff --git a/images/前端杂烩/CSS计数器/counters.png b/images/前端杂烩/CSS计数器/counters.png new file mode 100644 index 0000000000000000000000000000000000000000..3d7e03f382677b66a6bb46c8d6d9fadb35c0ed26 GIT binary patch literal 13087 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 JDK~Y$@h@e1`aJ*u literal 0 HcmV?d00001 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. +
    3. aaa
    4. +
    5. AAA +
      1. bbb
      2. bbb
      +
    6. +
    +``` + +对于有序列表来说,可以去指定`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`隐藏,计数器的值会增加 +这一点与有序列表是一样的