標籤：style blog http io color os ar for sp
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
CSS3中的counter和content屬性,一些簡單的內容顯示就不需要JS去實現了
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
