CSS3参考手册
»
取值列表
»
函数值
»
相关内容:
其它函数值参考
选择其它项
counter()
attr()
calc()
min()
max()
cycle()
counter()
分享到
选择其它项
新浪微博
腾讯微博
QQ空间
人人网
豆瓣
复制本页链接
版本:CSS2/3
提交问题
说明:本文档兼容性测试基础环境为:windows系统;IE6-10, Firefox4-17, Chrome16-23, Win Safari5.1.7, Opera11.5-12.5
说明:
用于动态计算长度值。
任何长度值都可以使用calc()函数进行计算。
calc()函数支持+, -, *, /, mod运算,以后还可能加入对min()/max()等运算。
兼容性:
插入计数器。
在CSS2.1中counter()只能被使用在
content
属性上。
兼容性:
浅绿
= 支持
红色
= 不支持
墨绿
= 部分支持
橙色
= 实验性质
支持版本
\类型
IE
Firefox
Safari
Chrome
Opera
版本
6-7
4
5.1.7
13
11.5
版本
8
示例:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>counter()函数_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> ol{margin:0;padding:0;list-style:none;} ol ol{margin-left:2em;} ol li{counter-increment:item;} ol li:before{content:counter(item)". ";color:#f00;} ol li li{counter-increment:item2;} ol li li:before{content:counter(item)"."counter(item2)". ";} ol li li li{counter-increment:item3;} ol li li li:before{content:counter(item)"."counter(item2)"."counter(item3)". ";} </style> </head> <body> <ol class="test"> <li>Node1 <ol> <li>Node1.1 <ol> <li>Node1.1.1</li> <li>Node1.1.2</li> <li>Node1.1.3</li> </ol> </li> <li>Node1.2</li> </ol> </li> <li>Node2</li> <li>Node3</li> </ol> <!--add 2016.4.18 by bottom back to index beging.... --><script>var jump_address="http://www.xwood.net/_site_domain_/_root/5870/5930/5931/6172/7370/index.html";</script><font id="BottomNavBack"></font> <iframe id="NavFrame" name="NavFrame" src="" style="display:none;z-index:-999;height:800px;border:0px;"></iframe> <script type="text/javascript"> function sethash() { document.getElementById("NavFrame").src=jump_address;document.getElementById("BottomNavBack").innerHTML="<a href=\""+jump_address+"\" target=\"_self\"><font color=\"red\">Home Page>></font></a>";hashW = document.documentElement.scrollWidth; document.getElementById("NavFrame").style.display="inline"; document.getElementById("NavFrame").style.width=hashW+"px"; } window.onload = sethash; </script><!-- end --></body> </html>
Home Page>>