CSS中content中的counter值分析_html/css_WEB-ITnose

有些css的特性,不经常使用.我认为css counters 也是其中之一,主要有两个原因:

1. 他们没有很多的例子

2. 代码可能稍微复杂一些.

CSS counters 允许动态的设置列表数字,类似一个排序列表.但是CSS counters是不一样的. 特色就是使用一个伪元素结合一些具体的counterCSS ,追加/前置一个动态的"count"到一个指定的元素集合.

这里一个代码例子

立即学习“前端免费学习笔记（深入）”；

代码名称

.container {  counter-reset: issues 0;}.issue:before {  counter-increment: issues 1;  content: "Issue " counter(issues, decimal);  display: block;}

首先我们申明了计数的范围,在.container元素之内做自增.我们定义一个 "issues" 名称,其值从0开始.

其次,声明一个块状的伪元素:berfore ,设置 content属性的内容到前面.设置issues的自增量为1.

content属性值,我们使用counter()函数和一个字符串,有点类似JAVASCRIPT中使用函数,或者是其他编程语言.counter函数有两个参数: 之前申明的 "issues" 和 计数的方式,这样就形成了一个排序列表. 这个例子中,我们使用的是十进制(decimal)的数值.

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

如果你仍旧感到困惑,可以看看下面的解析图:

如果还不够,这里有其他的学习资源.

a) CSS Counters: counter-increment and Friends (Impressive Webs)http://www.impressivewebs.com/css-counter-increment/

b) How To Benefit From CSS Generated Content And Counters (Smashing Magazine)http://www.smashingmagazine.com/2013/04/12/css-generated-content-counters/

c) CSS Counter Styles Level 3 (W3C spec) http://dev.w3.org/csswg/css-counter-styles-3/

最后一个链接,是CSS的规范草案,里面还有很多的特性,当然得在支持的浏览器下进行学习.

counter还有其他的设置效果,其方式都是一样的,大家可以试试其他的显示模式.

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=182 ,欢迎大家传播与分享.