需要支持: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>
效果: