counter-reset、counter()和counter-increment用法
分类：实例代码
标题中的三个css属性或者方法经常用于能够自动进行编号的列表或者类似的其他功能。
下面就通过代码实例介绍一下它们的作用，这里并不具体到每一个细节，而是从宏观上去理解它们，细枝末节可以自行查询。
现在的css有一点点编程语言的味道，标题中的三个属性或者方法如果从编程语言的角度来理解则更为容易。
先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
ul{
counter-reset:antzone;
}
ul li{list-style-type:none;}
ul li{counter-increment:antzone;}
ul li:before{
content:counter(antzone)".";
color:red;
}
</style>
</head>
<body>
<ul>
<li>本站的url地址是www.pipipi.net。</li>
<li>只有努力奋斗才会有美好的未来。</li>
<li>每一天都是新的，要好好珍惜。</li>
<li>没有人一开始就是高手，必须要通过努力。</li>
</ul>
</body>
</html>
上面是一个简单的给li元素列表编号的功能，下面就以编程语言的角度来介绍一下。
counter-reset可以认为是声明一个变量，这个变量的作用域就是，声明所在元素和下面所有的子元素。
变量antzone的默认值是0，也可以是负数，例如:
counter-reset:antzone -1;
上面代码声明一个变量antzone，并赋值为-1。
counter-increment的作用是对变量设置递增的幅度，默认值是1,代码如下:
counter-increment:antzone 2
规定每一次遍历到选择器匹配的元素，变量值增加2。
counter()就是用来计算变量的值，代码如下:
counter(antzone)
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu