CSS的counter计数器属性

属性

1
2
3
4
5
6
7
8
//number自增counter
counter-increment: number;

//重置counter
counter-reset: number;

//输出counter
content:counter(number);

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>counter</title>
<style>
div{
background-color: #F8F8F8;
padding: 64px;
}
p {
width: 100px;
counter-increment: number;
border: 1px solid #19f8d7;
}

p:before {
content: counter(number) ".";
font-size: 18px;
color: red;
}

</style>
</head>
<body>
<div>
<p>Test A</p>
<p>Test B</p>
<p>Test C</p>
<p>Test D</p>
<p>Test E</p>

</div>
</body>
</html>
--- 青山不改 绿水长流,日后江湖相见,自当杯酒言欢,咱们就此别过。---

本文标题:CSS的counter计数器属性

文章作者:mecono

发布时间:2019年08月08日 - 15:08

最后更新:2019年12月19日 - 09:12

原始链接:https://mecono.cn/3785104831.html

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-ND 4.0许可协议。转载请注明出处!