118 lines
3.6 KiB
Markdown
118 lines
3.6 KiB
Markdown
---
|
||
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;
|
||
}
|
||
}
|
||
```
|
||
实际效果如下
|
||
|
||
|
||
这样的有序列表有一定的局限性
|
||
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) '. ';
|
||
}
|
||
}
|
||
```
|
||
效果如下
|
||
|
||
|
||
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`函数，形式为`counters(name, string, style)`
|
||
name和style与基本计数器中的含义相同，**string**为拼接使用的字符串
|
||
|
||
#### 其他特性
|
||
如果其中存在使用`display:none`隐藏掉元素，则计数器的值不会增加
|
||
实际显示的序列仍然是正确的
|
||
如果使用`visibility:hidden`隐藏，计数器的值会增加
|
||
这一点与有序列表是一样的
|