csscontent之counter-reset、content-increment-Canrz

万万没想到，写了快三年前端，有不会用的css，居然还有完全没听过、见过的css属性，而且还是CSS2的内容！

关于counter-reset、content-increment两个属性的详解可以参看张鑫旭的博文：《CSS计数器(序列数字字符自动递增)详解》，这里做个记录，写个demo

 
 
 
 
 content-increment 
 
.test li {margin:16px 0;padding:0;list-style:none;}
.test li li:before{color:#f00;font-family:'Microsoft YaHei';}

.counter1 li{counter-increment:testname;}
.counter1 li:before{content:counter(testname)".";}

.counter2 li{counter-increment:testname2 2;}
.counter2 li:before{content:counter(testname2)"/";}

.counter3 li{counter-increment:testname3 -1;}
.counter3 li:before{content:counter(testname3)")";}

.counter4 li{counter-increment:testname4;}
.counter4 li:before{content:counter(testname4, upper-roman)". ";}

.counter5 {counter-reset:testname5;}
.counter5 li:before{content: counters(testname5, '-') '. '; counter-increment: testname5;color:blue;font-family: 'Microsoft YaHei';}
 
 
 
 
	 
		 默认时的计数器： 
		 
			 列表项 
			 列表项 
			 列表项 
		 
	 
	 
		 修改计数器每次增加的值为2： 
		 
			 列表项 
			 列表项 
			 列表项 
		 
	 
	 
		 修改计数器每次增加的值为-1： 
		 
			 列表项 
			 列表项 
			 列表项 
		 
	 
	 
		 修改计数器以罗马字符显示： 
		 
			 列表项 
			 列表项 
			 列表项 
		 
	 
 

 
	 计数器以嵌套计数显示: 
	 父级 
	 父级
		 
			 子级1 
			 子级2 
			 子级3 
		 
	 
	 父级
		 
			 子级1 
			 子级2 
			 子级3 
		 
	 
	 父级 
 

 
 
 

查看更多关于csscontent之counter-reset、content-increment-Canrz的详细内容...