Home > Article > Web Front-end > CSS3的counter()用法详解_html/css_WEB-ITnose
CSS3的counter()用法详解_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:34:121475browse
counter()的定义和用法:
是一个函数，其主要配合content一起使用。
使用counter()来调用定义好的计数器标识符。
语法结构:
counter(<identifier>,list-style-type)
参数解析:
（1）.
（2）.list-style-type:设置计数器的风格，有点类似于list-style-type。默认情况之下取值为十制，但你也可以重置这个样式风格，比如upper-roman或者upper-alpha等。
此参数值列表如下:
disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-alphanoneinherit
浏览器支持:
（1）.IE浏览器支持此属性。
（2）.谷歌浏览器支持此属性。
（3）.火狐浏览器支持此属性。
（4）.opera浏览器支持此属性。
（5）.safria浏览器支持此属性。
特别说明:只有IE7或者IE7以下的浏览器不支持。
继承性:
无继承性。
实例实例:
<!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;}ul li{counter-increment:antzone;}ul li:before{content:counter(antzone)".";color:red;}</style></head><body><ul> <li>蚂蚁部落欢迎您</li> <li>蚂蚁部落欢迎您</li> <li>蚂蚁部落欢迎您</li> <li>蚂蚁部落欢迎您</li></ul></body></html> 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=1154
更多css3知识可以参阅：http://www.softwhy.com/css3/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3动画延迟出现问题_html/css_WEB-ITnoseNext article：在显示代码效果（codepen）_html/css_WEB-ITnose