CSS3计数器功能演示：自动为章节添加数字序号功能，运行一下看效果就明白了，那些章节中的数字序号并不是本来就有，是用CSS生成的，所以在用时候，只需定义好，CSS会帮你自动加上这些序号，很实用吧！希望对大家有用。

演示效果：

1. 显示的内容

2. 显示的内容

3. 显示的内容

1. 显示的内容

2. 显示的内容

3. 显示的内容

1. 显示的内容

2. 显示的内容

3. 显示的内容

代码如下：

<style type="text/css">
/* list 1 style */
#list1 {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
#list1 p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
/* list 2 styles */
#list2 {
font: italic 1em Georgia, Times, serif;
color: #999;
list-style: lower-roman;
}
#list2 p {
font: normal .85em Georgia, Times, serif;
color: #000;
}
/* list 3 styles */
#list3 {
font: normal 1.1em Arial, Helvetica, sans-serif;
color: #666;
}
#list3 p {
font: normal .7em Arial, Helvetica, sans-serif;
color: #000;
border-left: solid 1px #999;
margin: 0;
padding: 0 0 1em 1em;
}
</style>

<ol id="list1">
<li><p>显示的内容</p></li>
<li><p>显示的内容</p></li>
<li><p>显示的内容</p></li>
</ol>
<ol id="list2">
<li><p>显示的内容</p></li>
<li><p>显示的内容</p></li>
<li><p>显示的内容</p></li>
</ol>
<ol id="list3">
<li><p>显示的内容</p></li>
<li><p>显示的内容</p></li>
<li><p>显示的内容</p></li>
</ol>