CSS3计数器功能演示：自动为章节添加数字序号功能，那些章节中的数字序号并不是本来就有，是用CSS生成的，所以在用时候，只需定义好，CSS会帮你自动加上这些序号，很实用吧！希望对大家有用。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS计数器</title>
<style type="text/css">
html {
color: #444;
font: 16px/1.6 微软雅黑,"Microsoft YaHei";
}
ul {
list-style: none;
padding-left: 3em;
}
.menu {
counter-reset: chapter;
}
.menu > li {
counter-increment: chapter;
counter-reset: section;
}
.menu > li:before {
content: "第" counter(chapter) "章";
padding-right: .5em;
}
.menu ul > li {
counter-increment: section;
}
.menu ul > li:before {
content: "第" counter(section) "节";
padding-right: .5em;
}
</style>
</head>
<body>
<ul>
<li>ASP教程
<ul>
<li>变量</li>
<li>函数</li>
<li>对象</li>
<li>数据库</li>
<li>输出</li>
</ul>
</li>
<li>PHP教程
<ul>
<li>PHP变量</li>
<li>PHP函数</li>
<li>对象</li>
<li>PHP数据库</li>
<li>输出</li>
</ul>
</li>
</ul>
</body>
</html>效果如图：
