css3 -- 自动生成序号（不使用JS,可任意排序）
需求：一个table 需要在第一列生成序号：1、2、3、4、5...... 并且自适应行数
不使用后台程序，开始考虑使用JS，但是一旦前台排序后，序号就乱了，
最后采用CSS的一个计数器方法实现！
<!DOCTYPE html> <html> <head> <style>
/*couter-reset：创建或重置一个或多个计数器*/ body {counter-reset:section;} h1 {counter-reset:subsection;}
/*伪元素:before ：在每个h1内容之中的第一个之前执行*/ h1:before { counter-increment:section; /* counter-increment：递增一个或多个计数器值*/ content:"Section " counter(section) ". "; /* content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容 */ } h2:before { counter-increment:subsection; content:counter(section) "." counter(subsection) " "; } </style> </head> <body> <p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p> <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>
简单介绍上例中使用的属性
1、伪元素:before 选择器，向选定的元素前插入内容。使用 content 属性来指定要插入的内容。
<!DOCTYPE html> <html> <head> <style> p:before { content:"Read this -"; } </style> </head> <body> <p>My name is Donald</p> <p>I live in Ducksburg</p> <p><b>Note:</b> For :before to work in IE8, a DOCTYPE must be declared.</p> </body> </html>
效果：
Read this -My name is Donald
Read this -I live in Ducksburg
Read this -Note: For :before to work in IE8, a DOCTYPE must be declared.
2、:after 选择器向选定的元素之后插入内容。使用 content 属性来指定要插入的内容。
<!DOCTYPE html> <html> <head> <style> p:after { content:"- 注意我"; } </style> </head> <body> <p>我的名字是 Donald</p> <p>我住在 Ducksburg</p> <p><b>注意：</b> :after在IE8中运行，必须声明<!DOCTYPE> </p> </body> </html>
效果：
我的名字是 Donald- 注意我
我住在 Ducksburg- 注意我
注意： :after在IE8中运行，必须声明 - 注意我
3、counter-reset：创建或重置一个或多个计数器，通常是和counter-increment属性，content属性一起使用
4、counter-increment：递增一个或多个计数器值，通常用于counter-reset属性和content属性。
5、content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
<!DOCTYPE html> <html> <head> <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> <p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p> <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>
效果：
