CSS中content中的counter值分析
有些CSS的特性,不经常使用.我认为CSS counters 也是其中之一,主要有两个原因:
1. 他们没有很多的例子
2. 代码可能稍微复杂一些.
CSS counters 允许动态的设置列表数字,类似一个排序列表.但是CSS counters是不一样的. 特色就是使用一个伪元素结合一些具体的counterCSS ,追加/前置一个动态的"count"到一个指定的元素集合.
这里一个代码例子
代码名称
.container {
counter-reset: issues 0;
}
.issue:before {
counter-increment: issues 1;
content: "Issue " counter(issues, decimal, 0, 0);
display: block;
}首先我们申明了计数的范围,在.container元素之内做自增.我们定义一个 "issues" 名称,其值从0开始.
其次,声明一个块状的伪元素:berfore ,设置 content属性的内容到前面.设置issues的自增量为1.
content属性值,我们使用counter()函数和一个字符串,有点类似JAVASCRIPT中使用函数,或者是其他编程语言.counter函数有两个参数: 之前申明的 "issues" 和 计数的方式,这样就形成了一个排序列表. 这个例子中,我们使用的是十进制(decimal)的数值.
如果你仍旧感到困惑,可以看看下面的解析图:
如果还不够,这里有其他的学习资源.
a) CSS Counters: counter-increment and Friends (Impressive Webs)http://www.impressivewebs.com/css-counter-increment/
b) How To Benefit From CSS Generated Content And Counters (Smashing Magazine)http://www.smashingmagazine.com/2013/04/12/css-generated-content-counters/
c) CSS Counter Styles Level 3 (W3C spec) http://dev.w3.org/csswg/css-counter-styles-3/
最后一个链接,是CSS的规范草案,里面还有很多的特性,当然得在支持的浏览器下进行学习.
counter还有其他的设置效果,其方式都是一样的,大家可以试试其他的显示模式.