玩转CSS Counter

当前位置 : 首页 > 网页制作 > CSS > 玩转CSS Counter

玩转CSS Counter

来源: 作者: 时间:2016-01-25 10:01
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计数实现文章中图片自动编号。
[]  
<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;  
}  
Tag:
网友评论

<