玩转CSS Counter
CSS Counter可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能,灵活使用CSS Counter可以让我们在进行文档排版、页面布局时事半功倍,好的,请大家摩摩拳擦擦掌,精彩内容马上呈现。
1.操作计数
1.1 counter-reset
语法: counter-reset: [<user-ident> <integer>?]+ | none 其中,user-ident为需要复位的计数器名称 integer为计数器复位值 none 不计数,默认值
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.呈现内容
语法: 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浏览器支持
4.应用案例
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在线玩弄代码
<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; }
5.参考文献
---------------------------------------------------------------
前端开发whqet,关注web前端开发技术,分享网页相关资源。
---------------------------------------------------------------
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。