counter-reset和counter-increment的用法及其详解

傷城~ 2022-02-17 06:51 314阅读 0赞

# counter-increment #

**这个属性代表递增一个或多个计数器的值；其默认值为none；其属性值有 none  ，id number ，inherit三个属性值**

** none：**代表没有计数器递增。

**id number：**id 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。

**inherit：** 继承父类的属性值。

*counter-increment属性通常用于counter-reset属性和content属性。*

#  counter-reset #

**counter-reset属性创建或重置一个或多个计数器。 其默认值为none（不能对选择器的计数器进行重置）；其属性值有 none  ，id number ，inherit三个属性值。**

**id number：**id 定义将重置计数的选择器、id 或 class。number 。可以设置选择器出现个数number 可以是正数、零或者负数。

**inherit：** 继承父类的属性值。

实例如下：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>计数器</title>
    		<style type="text/css">
    			/* 配合counter-increment和counter-reset属性 */
    			body{
    				counter-reset: section;/* 设置选择器出现的次数根据内容 */
    			}
    			h2{
    				counter-reset: subsection;
    			}
    			h2:before{
    				 counter-increment:section;/*属性递增一个或者多个计数器的值*/
    					content:counter(section) "、";
    			}
    			h4:before{
    			counter-increment:subsection;
    				content: counter(section) "." counter(subsection) "、";
    }
    		</style>
    	</head>
    	<body>
    		<h2>123</h2>
    		<h4>321</h4>
    		<h4>321</h4>
    		<h2>ads</h2>
    		<h4>5516</h4>
    		<h4>132</h4>
    	</body>
    </html>

其运行结果如下：

![20190419013612616.PNG][]

## 上述就是这个属性的作用，主要用来排序而不用有序列表ul来进行排序； ##

[20190419013612616.PNG]: /images/20220217/f71e5c2e41924b8b946aadce47e02a15.png