当前位置: 首页 > Web前端 > HTML5

CSS函数那些事(五)计数函数

时间:2023-04-05 21:10:56 HTML5

counter()counter返回一个表示计数器当前值的字符串。接收两个参数,一个名称和一个计数样式。counter(name,styleName),name区分大小写,作为代表当前计数器的名称标识符。styleName参数是可选的,代表递增数字或字母的类型,可接受的参数是list-style-type支持的类型。常用的有以下几种:disc(实心圆点)circle(空心圆点)square(实心正方形)decimal(阿拉伯数字12345...)lower-roman(罗马数字i,ii,iii...)upper-roman(罗马数字digitalsI,II,III,IV...)simp-chinese-informal(中文数一、二、三...九十九,)simp-chinese-formal(中国繁体一二三四吴...)lower-latin(小写字母abcd...)upper-latin(大写字母ABCD....)...更多信息和兼容性可以参考MDNlist-style-typerelatedtocounterinterests还有两个属性values:counter-resetcounter-incrementcounter-reset,counter-incrementcounter-reset用于重置CSS计数器,重置内容包括名称和初始编号。示例:

.demo1{counter-reset:counter1123;}.demo1:before{内容:counter(counter1,simp-chinese-formal);}效果counter-increment用于表示计数器的递增区间,见代码
.demo2{计数器重置:counter21;/*计数器递增:counter2-2;*/}section:before{内容:counter(counter2,decimal);反增量:counter22;}EffectCompatibility基本支持counters()counters()是一个嵌套计数器,用来定义嵌套计数器的连接符。counters(counterName,string,styleName),接收3个参数counterName,string,styleName。第三个参数是可选的。看栗子内容一子内容一
子内容二
子内容三内容二子内容一子内容一子内容二div>内容3.father{counter-reset:counter3;左填充:30px;}.son:之前{内容:计数器(counter3,“-”)'。';反增量:counter3;}Effect列表元素使用计数器来定义相互之间的计数连接规则,可以很方便的模拟有序列表的兼容性兼容性总结为counterCounter类比于ol和ul,在样式控制上会更加灵活,样式设置会更加随意。对于有列表相关样式优化的项目,可以考虑使用counter()、counters()进行优化。兼容性也不错。最后总结一下最近css函数相关的东西。这是系列文章中的第四篇文章。至此,CSS函数的那些事就产生了(一)比较函数和CSS函数的那些事(二)你所不知道的attr())CSS函数的那些事儿(三)背景图片函数CSS函数的那些事(四)网格函数文章中的测试代码会被收录到项目中,并且都已经归类了。欢迎您继续关注。如果对你有帮助,可以点个赞哦!项目地址点这里