css counter-reset属性功能简介


摘要:
下文讲述css属性counter-reset的功能说明,如下所示:


css counter-reset的功能说明

设置一个列表元素的计数器复位

  counter-reset 语法:
        counter-reset:none | [<identifier> <integer>]+
 -----------参数说明--------------
none:  
禁止计数器复位
<identifier>:
identifier定义一个或多个将被复位的selector,id,或者class
<integer>:
定义被复位的数值,可以为负值,默认值是0

counter-reset注意事项:
    js脚本中需使用counterReset属性设置其属性


css counter-reset的功能示例说明

<meta charset="utf-8" /> 
<style>
.lsTest ol{margin:16px 0;padding:0;list-style:none;}
.lsTest li li:before{color:green;font-weight:bold;}
.counter1 li{counter-increment:a;}
.counter1 li:before{content:counter(a)".";counter-reset:a;}
.counter2 li{counter-increment:b;}
.counter2 li:before{content:counter(b)".";counter-reset:b 10;}
.counter3 li{counter-increment:c;}
.counter3 li:before{content:counter(c)".";counter-reset:c -1;}
</style>
<p>
 maomao365.com <br />
 counter-reset属性示例说明
</p>
<hr />

<ul class="lsTest">
	<li class="counter1">
		<strong>默认时被复位的计数器:</strong>
		<ol>
			<li>猫猫教程</li>
			<li>猫猫教程</li>
			<li>猫猫教程</li>
		</ol>
	</li>
	<li class="counter2">
		<strong>将计算器复位为10:</strong>
		<ol>
			<li>猫猫教程</li>
			<li>猫猫教程</li>
			<li>猫猫教程</li>
		</ol>
	</li>
	<li class="counter3">
		<strong>将计算器复位为-1:</strong>
		<ol>
			<li>猫猫教程</li>
			<li>猫猫教程</li>
			<li>猫猫教程</li>
		</ol>
	</li>
</ul> 
css counter-reset属性示例说明

css counter-reset属性示例说明