实现01、02、03...
/*css自动序号________________________*/ element第一次出现之前的同级或者父级元素 { counter-reset: NO; /*初始化变量NO*/ } element:before { counter-increment: NO; content: '0' counter(NO) "、"; } /*解决超过9的序号数字还有0打头*/ element:nth-of-type(n + 9):before { content: counter(NO) "、"; }
实现1、1.1、1.2、2、2.1、2.2、2.3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序列编号</title> <style> body {counter-reset:section;} h1 {counter-reset:subsection;} h1:before { counter-increment:section; content:"Section " counter(section) ". "; } h2:before { counter-increment:subsection; content:counter(section) "." counter(subsection) " "; } </style> </head> <body> <h1>HTML tutorials</h1> <h2>HTML Tutorial</h2> <h2>XHTML Tutorial</h2> <h2>CSS Tutorial</h2> <h1>Scripting tutorials</h1> <h2>JavaScript</h2> <h2>VBScript</h2> <h1>XML tutorials</h1> <h2>XML</h2> <h2>XSL</h2> </body> </html>