<!DOCTYPE html>
<html lang=‘zh-cn‘>
<head>
<title>Insert you title</title>
<meta http-equiv=‘description‘ content=‘this is my page‘>
<meta http-equiv=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type=‘text/css‘>
html{font:400 13px/1.2em Courier New;}
.list-item{padding-left:15px;}
p{text-indent:25px;}
.list-item{counter-reset:reset 0;}
#main{counter-reset:counter 0;}
.list-item:before{
content:counter(counter)‘.‘;
counter-increment:counter 1;
}
p:before{
content:counter(counter)‘-‘counter(reset)‘.‘;
counter-increment:reset 1;
}
</style>
</head>
<body>
<div id=‘main‘>
<div class=‘list‘>
<div class=‘list-item‘>list-item_01
<p>this is a test</p>
<p>this is a test</p>
</div>
<div class=‘list-item‘>list-item_02
<p>this is a test</p>
<p>this is a test</p>
<p>this is a test</p>
</div>
<div class=‘list‘></div>
</div>
<div class=‘list‘>
<div class=‘list-item‘>list-item_03
<p>this is a test</p>
<p>this is a test</p>
<p>this is a test</p>
</div>
<div class=‘list-item‘>list-item_04
<p>this is a test</p>
<p>this is a test</p>
</div>
<div class=‘list‘></div>
</div>
</div>
</body>
</html>
[ css 计数器 counter ] css中counter计数器实例演示一
原文：http://www.cnblogs.com/mysearchblog/p/5649534.html