牧羊岛

懒是不会有好果子吃滴//

导航

使用css自动编号before和content

Posted on 2012-09-07 10:17  牧羊岛  阅读(2599)  评论(0编辑  收藏  举报

需要支持:before选择器、支持content属性和counter方法的浏览器。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
</head>
<style>
body{
counter-reset: section 0;
}
h1:before{
content: "Section " counter(section) ". ";
/* Add 1 to section */
counter-increment: section;
}
h1{
/* Set sub-section to 0 */
counter-reset: sub-section 0;
}
h2:before {
content: counter(section) "." counter(sub-section) " ";
counter-increment: sub-section;
}
</style>
<body>
<h1>我们</h1>
<h2>qqq1</h2>
<h2>qqq2</h2>
<h1>我们很好</h1>
<h2>qqq1</h2>
<h2>qqq2</h2>
</body>
</html>

效果: