CSS Counter(CSS 计数)可以允许我们使用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;
}
大家可以到codepen欣赏另一个综合使用css counter的案例。
OK,That's all, Thank you.
5.参考文献
---------------------------------------------------------------
前端开发whqet,关注web前端开发技术,分享网页相关资源。
---------------------------------------------------------------