文章出處
文章列表
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>
以及CSS3中的attr屬性可以獲取到元素屬性值例如：content : attr("attr");
有一點需要注意的是：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
文章列表
全站熱搜
留言列表
