CSS3 counter-reset
將指定selector的計數器復位。
對應的指令碼特性為counterReset。
語法結構:
[CSS] 純文字檢視 複製程式碼counter-reset:none | [<identifier> <integer>]
取值:
none:阻止計數器復位,預設值。
<identifier>:counter-increment規定的計數器名稱。
<integer>:定義被複位的數值,可以為負值,預設值是0 。
瀏覽器支援:
(1).IE瀏覽器支援此屬性。
(2).edge瀏覽器支援此屬性。
(3).谷歌瀏覽器支援此屬性。
(4).火狐瀏覽器支援此屬性。
(5).opera瀏覽器支援此屬性。
(6).safria瀏覽器支援此屬性。
特別說明:只有IE7或者IE7以下的瀏覽器不支援。
繼承性:
無繼承性。
例項程式碼:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> ul li{list-style-type:none;} .first li:before{color:blue} .first li{counter-increment:myfirst;} .first li:before{ content:counter(myfirst)"."; counter-reset:myfirst; } .second li:before{color:red;} .second li{counter-increment:mysecond;} .second li:before{ content:counter(mysecond)"."; counter-reset:mysecond 5; } </style> </head> <body> <div> <ul class="first"> <li>螞蟻部落歡迎您</li> <li>螞蟻部落歡迎您</li> <li>螞蟻部落歡迎您</li> <li>螞蟻部落歡迎您</li> </ul> <ul class="second"> <li>螞蟻部落歡迎您</li> <li>螞蟻部落歡迎您</li> <li>螞蟻部落歡迎您</li> <li>螞蟻部落歡迎您</li> </ul> </div> </body> </html>
相關文章
- counter-reset、counter()和counter-increment用法REM
- CSS3CSSS3
- CSS3簡明教程之初識CSS3CSSS3
- css3省略……CSSS3
- CSS3 quotesCSSS3
- CSS3 TransitionCSSS3
- CSS3 rotate()CSSS3
- CSS3 clipCSSS3
- CSS3 @supportsCSSS3
- CSS3 currentColorCSSS3
- CSS3 vmaxCSSS3
- CSS3 vminCSSS3
- CSS3 vhCSSS3
- CSS3 vwCSSS3
- CSS3 remCSSS3REM
- CSS3 attr()CSSS3
- CSS3 orderCSSS3
- CSS3 columnsCSSS3
- CSS3 counter()CSSS3
- CSS3動畫CSSS3動畫
- CSS3筆記CSSS3筆記
- CSS3 動畫解析CSSS3動畫
- CSS3初識CSSS3
- CSS3 animation 動畫CSSS3動畫
- css3 漸變CSSS3
- CSS3 @keyframesCSSS3
- css3 新特性CSSS3
- CSS3 七 字型CSSS3
- CSS3 之 flexCSSS3Flex
- css3動畫整理CSSS3動畫
- css3漸變CSSS3
- CSS3過渡CSSS3
- 淺談css3CSSS3
- CSS3象棋效果CSSS3
- CSS3 perspective(n)CSSS3
- CSS3 ::SelectionCSSS3
- CSS3之背景CSSS3
- CSS3背景影像CSSS3