![6af1266af11c6105cd1db2d89aaf2143.png](https://i-blog.csdnimg.cn/blog_migrate/980b6b683a1bf2798cdd0d569b46906c.png)
1、概述
实质:计数器就是初始化变量然后进行自增赋值,就类似 a+=1
CSS 中的计数器本质上来说就是由 CSS 维护的变量,计数器的值可以通过 CSS 规则递增来跟踪计数器的使用次数,例如可以使用计数器来自动为网页中的标题编号。
简单来说,有序列表就是一个比较简单的计数器,但计数器可以实现编号更为复杂的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计数器示例</title>
<style>
#demo ol {
counter-reset: section;
list-style-type: none;
}
#demo ol li {
counter-increment: section;
}
#demo ol li:before {
content: counters(section, ".") ". ";
}
</style>
</head>
<body>
<div id="demo">
<ol>
<li>进风口的爽肤水
<ol>
<li>非进口商的</li>
<li>非进口商的</li>
<li>非进口商的</li>
</ol>
</li>
<li>进风口的爽肤水
<ol>
<li>非进口商的</li>
<li>
非进口商的
<ol>
<li>将咖啡色的开发商</li>
<li>将咖啡色的开发商</li>
<li>将咖啡色的开发商</li>
<li>将咖啡色的开发商</li>
</ol>
</li>
<li>非进口商的</li>
</ol>
</li>
<li>进风口的爽肤水</li>
</ol>
</div>
</body>
</html>
如上述示例所示,操作计数器的值是通过如下 2 个属性实现:
counter-reset 属性
counter-increment 属性
在 HTML 页面中显示计数器是通过如下 2 个函数实现:
counter() 函数
counters() 函数
2.1、counter-rest 属性(初始化)
实质:变量的初始化
CSS
2.2、counter-increment 属性(递增或递减)
CSS
2.3、counter() 函数(打印输出)
CSS
2.4、counters () 函数
CSS