玩转CSS Counter - html/css语言栏目：html.css - 自学p

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;   }