css counter-increment属性功能简介


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


css counter-increment的功能说明

设置一个列表元素选择器的增加的步长

  counter-increment 语法:
        counter-increment:none | [<identifier> <integer>]+
 -----------参数说明--------------
  none:
   阻止计数器增加
 <identifier>:
     identifier定义一个或多个将被增加的selector,id,或者class
<integer>:
     定义计算器每次增加的数值,可以为负值,默认值是1

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


css counter-increment的功能示例说明

 
<meta charset="utf-8" /> 
<style>
.test ol{margin:16px 0;padding:0;list-style:none;}
.test li li:before{color:green;}
.counter1 li{counter-increment:a;}
.counter1 li:before{content:counter(a)".";}
.counter2 li{counter-increment:a2 2;}
.counter2 li:before{content:counter(a2)".";}
.counter3 li{counter-increment:a3 -1;}
.counter3 li:before{content:counter(a3)".";}
</style>
<p>
maomao365.com<br />
counter-increment属性值说明
</P>
<hr />
<ul class="test">
	<li class="counter1">
		<strong>默认时的计数器:</strong>
		<ol>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
		</ol>
	</li>
	<li class="counter2">
		<strong>修改计数器每次增加的值为2:</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-increment属性示例说明

css
counter-increment属性示例说明