玩转CSS Counter

CSS Counter可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能,灵活使用CSS Counter可以让我们在进行文档排版、页面布局时事半功倍,好的,请大家摩摩拳擦擦掌,精彩内容马上呈现。


1.操作计数

CSS计数(css counter)主要依靠两个属性来实现计数的操作。
counter-reset,将指定计数器复位
counter-increment,设定计数器的变化(增加的值)

1.1 counter-reset

语法:
	counter-reset: [<user-ident> <integer>?]+ | none

其中,user-ident为需要复位的计数器名称
      integer为计数器复位值
      none 不计数,默认值
counter-reset可以只指定计数器(计数器的默认复位值为0),也可以同时指定计数器和复位值,也可以同时指定若干计数器,如下面代码所示。
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

语法:
	counter-increment: [<user-ident> <integer>?]+ | none

其中,user-ident 为需要改变的计数器名称
      integer 为计数器改变值,可以为正值也可以为负值,可以同时改变多个计数器
      none 阻止计数器增加,默认值
代码示例如下。
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跟计数相关的属性值有以下几种
语法:
	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://gx.zptc.cn/whqet/img/1.jpg" />
	  	<figcaption>图片标题</figcaption>
	</figure>
	<figure class="figure figure-right">
		<img src="http://gx.zptc.cn/whqet/img/2.jpg" />
	  	<figcaption>图片标题</figcaption>
	</figure>
	<figure class="figure figure-right">
		<img src="http://gx.zptc.cn/whqet/img/3.jpg" />
	  	<figcaption>图片标题</figcaption>
	</figure>
	<figure class="figure figure-right">
		<img src="http://gx.zptc.cn/whqet/img/4.jpg" />
	  	<figcaption>图片标题</figcaption>
	</figure>
	<figure class="figure figure-right">
		<img src="http://gx.zptc.cn/whqet/img/5.jpg" />
	  	<figcaption>图片标题</figcaption>
	</figure>
</article>
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;
}

3.2浏览器支持

看看caniuse的兼容性表格,全线飘绿,大家可以放心使用,除了IE8-。

4.应用案例

css计数可以应用在文档排版中,实现图片、表格的排序,也可以用在文章、新闻列表等场合,不但可以用在ol、ul、dl等列表元素中,也可以用在任意的html元素中,达到计数效果,也请大家留言发表自己的高见,这里看几个效果。

4.1 嵌套编号(MDN案例,参见使用css计数器)

ol {
  counter-reset: section;                /* 为每个ol元素创建新的计数器实例 */
  list-style-type: none;
}
li:before {
  counter-increment: section;            /* 只增加计数器的当前实例 */
  content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */
}
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

4.2 编号表格单元格,到codepen在线玩弄代码

html简单,就是弄个表格,里面没东西
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
然后CSS实现对每个单元格的编号,鼠标悬停时显示编号。
/*
* 主要实现表格整体设置,实现圆角表格
* 重置计数行计数(rowNumber)
**/
table{
  width:400px;
  border-radius:20px;
  margin:50px auto;
  border-collapse: separate;
  border: 1px solid rgba(0,0,0,.2);
  border-spacing:0;
  counter-reset:rowNumber;
  box-shadow: 0 0 10px rgba(0,0,0,.2);
}
tr:first-child td:first-child{
  border-radius:20px 0 0 0;
}
tr:first-child td:last-child{
  border-radius:0 20px 0 0;
}
tr:last-child td:first-child{
  border-radius:0 0 0 20px;
}
tr:last-child td:last-child{
  border-radius:0 0 20px 0;
}
/*
* 表行
*   增加行计数(rowNumber)
*	重置列计数(tdNumber)
**/
tr{
  counter-increment:rowNumber;
  counter-reset:tdNumber;
}
/*
* 单元格设置
*   增加列计数(tdNumber)
**/
td{
  width:50px;
  height:40px;
  background:rgba(0,0,0,.1);
  border: 1px solid rgba(0,0,0,.2);
  box-size: border-box;
  text-align: center;
  counter-increment:tdNumber;
  cursor: pointer;
}
td:nth-child(2n){
  background:rgba(0,0,0,.15);
}
/*
* 使用行计数(rowNumber)和列计数(tdNumber)
**/
td::after{
  content:counter(rowNumber,upper-alpha) counter(tdNumber);
  opacity: 0;
  transition:all 1s;
}
td:hover::after{
  opacity: 1;
}
OK,That‘s all, Thank you.

5.参考文献

---------------------------------------------------------------

前端开发whqet,关注web前端开发技术,分享网页相关资源。
---------------------------------------------------------------

玩转CSS Counter,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。