一、CSS中的计数（css counter）主要依靠两个属性来实现计数的操作。

  counter-reset，将指定计数器复位

  counter-increment，设定计数器的变化（增加的值）

1、counter-reset 属性

用法：counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。

说明：利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。

注释：如果使用display: none，则无法重置计数器。如果使用visibility: hidden，则可以重置计数器。

可能的值有：
none —— 默认。不能对选择器的计数器进行重置。
id number —— id 定义重置计数器的选择器、id 或 class。number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。
inherit —— 规定应该从父元素继承 counter-reset 属性的值。

例子： 

.someSelector{ 
    counter-reset:counterA; /*计数器counterA 复位，复位值为0*/ 
    counter-reset:counterA 5; /*计数器counterA 复位，复位值为5*/ 
    counter-reset:counterA 2 counterB; /*计数器counterA 复位，复位值为4，计数器counterB复位，复位值为0*/ 
    counter-reset:counterA 2 counterB 4; /*计数器counterA 复位，复位值为2，计数器counterB复位，复位值为4*/ 
}

2、counter-increment 属性

用法：counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

说明：利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。

注释：如果使用了display: none，则无法增加计数。如使用visibility: hidden，则可增加计数。；

可能的值有：

none —— 默认。不能对选择器的计数器进行重置。

id number —— id 定义重置计数器的选择器、id 或 class。number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。

inherit —— 规定应该从父元素继承 counter-reset 属性的值。

例子： 

.someSelector{
   counter-increment: counterA; /* 增加CounterA，每次加1 */
   counter-increment: counterA 2; /* 计数器counterA，每次加2 */
   counter-increment: counterA 2 counterB -1; /* counterA，每次加2，同时counterB每次减1*/
}

二、呈现内容

我们需要通过的:before,:after等伪对象配合content属性来呈现计数。content跟计数相关的属性值有以下几种

[css]

语法：

content:counter(name)

counter(name,list-style-type)

counters(name,string)

counters(name,string,list-style-type)

counter(name) 或counter(name, list-style-type):

counter 有两个参数：name，你可以提到increment或 reset；list-style-type，如果没有被声明，默认为”decimal”(十进制数字)。

这其中关于content的用法，我们在此提一下，具体大家可以网上查一下资料。

content语法为：

content:string|url|counter(name)|counter(name, list-style-type)|counters(name, string)|counters(name, string, list-style-type)|attr(X)|open-quote|close-quote|no-open-quote|no-close-quote;

三、例子说明

如： 

h1 {counter-increment: headers;counter-reset: subsections;}
h1:before {content: counter(headers, upper-roman);}

为了使用这个计数器(counter-increment)，应该提供一个名字(name)。在上面的情景中，这个名字就是”headers”。 也可以指定样式(counter-rese)。如果未定义样式，样式就会默认为数字；这里样式为“subsections”。这些值可以包括所有的list-style-type 值，这些值包括：decimal | decimal-leading-zero | lower-alpha | lower-greek | lower-roman | upper-alpha | upper-roman | lower-latin | upper-latin | hebrew | georgian 等等

在生成的内容中可以引入多个计数器。如：

在每个h1的前面添加计数器，并在每一个h1后面重设h2的计数器， CSS 可以这样写： 

h1 {counter-increment: headers;counter-reset: subsections;}
h1:before {content: counter(headers, upper-roman);}
h2 {counter-increment:subsections;}
h2:before {content: counter(headers, upper-roman) "." counter(subsections, lower-roman) ":";}

现在所有的h2被加上了它们的标题数字和章节数字。

关于这些代码需要注意的是：请注意在h2:before 声明中我们包括了两个计数器：标题计数器和章节计数器。在每个调用中我们都定义了样式，因为样式并没有被继承。同样，我们在声明中添加了字符串。注意我们是用引号来引入字符串的，而不是用计数器，并且除了我们的内容值之外，没有相关元素。为了在同样的样式属性中联合多个计数器ID，可以使用空格将计数器ID值连在一起。

计数器的递增是通过counter-increment 声明来实现的。尽管默认的值从1开始递增，我们也可以从其它数值开始递增。你可以重设计数器。在每个标题后面重设章节的计数器看起来是比较容易接受的。要重写默认值1，并在每个h1元素后重设数字，CSS可以这样写： 

h1 {
   counter-increment: headers 10;
   counter-reset: subsections 5;
}
h2 {
   counter-increment:subsections 2;
}

四、具体示例效果

css代码： 

.box {
	width:500px; 
	height:auto; 
	overflow:hidden;  
	margin:50px auto; 
	border-radius:5px;
	box-shadow:0px 1px 5px rgba(0,0,0,0.5);
}
.box h2 {
	background:#00A300; 
	color:#fff; 
	padding:10px; 
	border-top:1px solid #ddd; 
	border-bottom:1px solid #ddd;
}
.box h3 {
	background-color:#f5f5f5; 
	color:#666; 
	padding:5px 30px; 
	border-bottom:1px solid #ddd;
}
h2{
	counter-increment:yuan;
	counter-reset:qianduan8;
}
h2:before {
	content:"标题" counter(yuan);
}
h3{
	counter-increment:qianduan8;
}
h3:before {
	content:counter(yuan) "." counter(qianduan8, lower-roman) ":";
}
html： 
	<div class="box">
		<h2></h2>
		<h3></h3>
		<h3></h3>
		<h2></h2>
		<h3></h3>
		<h3></h3>
	</div>
效果：