来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] 1 操作计数CSS计数（css counter）主要依靠两个属性来实现计数的操作。counter-reset，将指定计数器复位counter-increment，设定计数器的变化（增加的值）1 1 counter-reset[css] 语法： counter-reset:...
|
1.操作计数
CSS计数（css counter）主要依靠两个属性来实现计数的操作。
counter-reset，将指定计数器复位
counter-increment，设定计数器的变化（增加的值）
1.1 counter-reset
[css]
语法：
counter-reset: [<user-ident> <integer>?]+ | none
其中，user-ident为需要复位的计数器名称
integer为计数器复位值
none 不计数，默认值
counter-reset可以只指定计数器（计数器的默认复位值为0），也可以同时指定计数器和复位值，也可以同时指定若干计数器，如下面代码所示。
[css]
someSelector{
/*some other code*/
counter-reset: counterA; /*计数器counterA 复位，复位值为0*/
counter-reset: counterA 6; /*计数器counterA 复位，复位值为6*/
counter-reset: counterA 4 counterB; /*计数器counterA 复位，复位值为4，计数器counterB复位，复位值为0*/
counter-reset: counterA 4 counterB 2; /*计数器counterA 复位，复位值为4，计数器counterB复位，复位值为2*/
}
1.2 counter-increment
[css]
语法：
counter-increment: [<user-ident> <integer>?]+ | none
其中，user-ident 为需要改变的计数器名称
integer 为计数器改变值，可以为正值也可以为负值，可以同时改变多个计数器
none 阻止计数器增加，默认值
代码示例如下。
[css]
someSelector{
/*some other code*/
counter-increment: counterA; /* 增加CounterA，每次加1 */
counter-increment: counterA 2; /* 计数器counterA，每次加2 */
counter-increment: counterA 2 counterB -1; /* counterA，每次加2，同时counterB每次减1*/
}
2.呈现内容
我们需要通过的::before,::after等伪对象配合content属性来呈现计数。content跟计数相关的属性值有以下几种
[css]
语法：
content:counter(name)
counter(name,list-style-type)
counters(name,string)
counters(name,string,list-style-type)
3.使用计数
3.1图片自动编号
我们来看一个例子，通过css计数实现文章中图片自动编号。
[html]
<article class="imgList">
<figure class="figure figure-right">
<img src=http://www.2cto.com/uploadfile/2014/0418/20140418043635252.jpg" />
<figcaption>图片标题</figcaption>
</figure>
<figure class="figure figure-right">
<img src=http://www.2cto.com/uploadfile/2014/0418/20140418043635333.jpg" />
<figcaption>图片标题</figcaption>
</figure>
<figure class="figure figure-right">
<img src=http://www.2cto.com/uploadfile/2014/0418/20140418043635496.jpg" />
<figcaption>图片标题</figcaption>
</figure>
<figure class="figure figure-right">
<img src=http://www.2cto.com/uploadfile/2014/0418/20140418043635781.jpg" />
<figcaption>图片标题</figcaption>
</figure>
<figure class="figure figure-right">
<img src=http://www.2cto.com/uploadfile/2014/0418/20140418043635176.jpg" />
<figcaption>图片标题</figcaption>
</figure>
</article>
css文件实现计数
[css]
* {
padding: 0;
margin:0;
}
article.imgList {
/*counter-reset: imgCounter;*/
counter-reset: imgCounter 10;
}
article.imgList figure {
/*counter-increment: imgCounter;*/
counter-increment: imgCounter -1;
width: 640px;
position: relative;
}
article.imgList figure figcaption {
position: absolute;
width: 640px;
height: 40px;
line-height: 40px;
text-indent: 20px;
background-color:rgba(0, 0, 0, .2);
left: 0;
bottom:0;
color: #fff;
}
article.imgList figure figcaption:before {
content:"Fig."counter(imgCounter);
margin-right: 1em;
}
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
