CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了
浏览数：36 /
时间：2015年06月09日
HTML的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS_counter</title> <style> body{ /* 需要一个变量 或者第二个参数一个初始值，第二个参数可以不要，默认是从1开始的，(这不科学) */ counter-reset : test 100; } div.num:after{ /*如果不把这个元素设置成伪类;是没有效果的;*/ counter-increment : test; /*这里利用了另一个CSS3的属性content*/ content : counter(test); height : 40px; } div.num:before{ /*CSS3的content属性*/ content : "this is before preFix" } div.content{ /*WARN : 这个content属性是无效的;*/ content : "noContent"; } </style> </head> <body> <dl> <dt>知识点1：</dt> <dd>CSS3中的content属性</dd> <dt>知识点2：</dt> <dd>CSS3中的counter-reset和counter-increment属性</dd> </dl> <div class="num"></div> <div class="num"></div> <div class="num"></div> <div class="num"></div> <div class="num"></div> <div class="num"></div> <div class="num"></div> <div class="num"></div> <div class="num"></div> <div class="num"></div> <div class="content"></div> </body> </html>
有一点需要注意的是：content和counter只能用在伪类那边的，平常清浮动也用到伪类的content：”“；
参考链接：
http://www.w3school.com.cn/cssref/pr_gen_counter-reset.asp
http://msdn.microsoft.com/zh-cn/library/gg721754(v=Expression.40).aspx
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
