css中的counter计数器
作为程序猿,代码比什么都有说服力,嗯,所以废话不多说,直接看吧,认真看完了,就一定有收获(内容有点多,需要一点耐心哦,我是一点一点写的,咱也一点一点看呗)
counter:是css计数器,只能跟content属性在一起使用的时候才起作用,而content属性专用在before/after伪元素上
counter计数器的属性和方法
属性有:counter-reset、counter-increment
方法有:counter、counters
counter-reset:可以理解为“计数器-重置”的意思,有两个参数:name(必选参数)/ start(可选参数,默认值为0)。主要作用就是给计数器起名字,顺便告诉从哪个数字开始计数。
OK, 这里,我们先看个简单的counter-reset的例子:
<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;}p{font-size:20px;counter-reset:count 4;}p:after{content:counter(count);}</style><div class="box"><p>3的后面是</p>
</div>
counter-reset的计数重置可以是负数,例如-2。也可以写成小数,例如2.99当成2处理,不过就是IE和FireFox都不识别,认为是不合法数值,直接无视,当作默认值0来处理;Chrome,任何小数都是向下取整。
counter-reset,可以给多个计数器同时命名。中间直接用空格分开,其它的都不可以
嗯、看例子呗
<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;font-size:20px;}p{counter-reset:count 1 count1 4;display:inline-block;}p:after{content:counter(count);}span:before{content:counter(count1);}</style><div class="box"><p>13的后面是</p><span></span>
</div>
另外,counter-reset还可以设置为none和inherit. 干掉重置以及继承重置。
2. counter-increment:就是“计数器-递增”的意思,值为counter-reset的1个或多个name。后面可以跟随数字,表示每次计数的变化值。如果不写,则使用默认变化值1
css计数器的计数是有一套规则的,具体来说就是:counter-reset唯一,每counter-increment一次,counter-reset增加一次计数。
下面我们来看一下例子理解一些
<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;}p{font-size:20px;counter-reset:count 3; counter-increment:count;}p:after{content:counter(count);}</style><div class="box"><p>3的后面是</p>
</div>
这里counter-increment在p标签中,counter-reset值增加,默认递增1,于是计数从设置的初始值3变成了4,count就是这里的计数器,自然伪元素content值counter(count)就是4
② 当然,也可以普照自身,也就是counter-increment直接设置在伪元素上:
<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;}p{font-size:20px;counter-reset:count 3; }p:after{content:counter(count);counter-increment:count;}</style><div class="box"><p>3的后面是</p>
</div>
依然是使用一次counter-increment全局的计数器+1,所以,显示的数值还是4,效果与上面的一样。
③ 如果父元素和子元素都设置counter-increment,结果会如何呢?看下面的例子
<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;}p{font-size:20px;counter-reset:count 2;counter-increment:count; }p:after{content:counter(count);counter-increment:count;}</style><div class="box"><p>3的后面是</p>
</div>
很简单的,父元素增加1,子元素也增加1,counter-reset 设置的计数器值增加2次,计数起始值是2,于是现实的数字就是4 啦!
总而言之,无论位置在何方,只要有counter-increment,对应的计数器的值就会变化,counter()只是输出而已!
counter-increment其他设定
① counter-reset可以一次命名两个计数器名称,counter-increment自然有与之呼应的设定,也是名称留空就可以了。
<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;font-size:20px;}p{counter-reset:count 1 count1 3;display:inline-block;counter-increment:count 2 count1}p:after{content:counter(count);}span:before{content:counter(count1);}</style><div class="box"><p>33的后面是</p><span></span>
</div>
counter-increment:每次增加的数字默认是1,当然我们也可以自己设置增加的数字是什么,就像上面的例子,可以把增加值设置为2
还可以是负数,例如:
counter-increment: counter -1
就有了递减排序效果啦!
③ counter-increment值还可以是none或者inherit
3. counter()/counters()
这是个方法,作用很单纯显示计数。不过名称、用法有多个:
① 目前为止,从上面的例子中我们用的比较多的就是下面的这种了
counter(name) /* name就是counter-reset的名称 */
② 那下面这个语法是什么意思呢?
counter(name, style)
这里的style参数还有有些名堂的。其支持的关键字值就是list-style-type支持的那些值。作用是,我们递增递减可以不一定是数字,还可以是英文字母,或者罗马文等。
list-style-type:disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
看个例子呗
<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;font-size:20px;}p{counter-reset:count 1 count1 3;display:inline-block;counter-increment:count 2 count1}p:after{content:counter(count);}span:before{content:counter(count1,lower-roman) ;}</style><div class="box"><p>33的后面是</p><span></span>
</div>
③ counter还支持级联。也就是一个content属性值可以有多个counter()方法
<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;font-size:20px;}p{counter-reset:count 1 count1 3;display:inline-block;counter-increment:count 2 count1}p:after{content:counter(count) counter(count1);}</style><div class="box"><p>33的后面是</p><span></span>
</div>
④ 下面介绍counters()方法。看似值多了个字母s, 但表意大变身。counters几乎可以说是嵌套计数的代名词。
基本用法为:
counters(name, string);
其中,string参数为字符串(需要引号包围的)(必须参数),表示子序号的连接字符串。例如的1.1的string参数就'.',1-1的string参数就是‘-’..
嗯、直接看例子喽
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demo</title><style>li{list-style:none;}.father { padding-left: 20px; counter-reset: count; line-height: 1.6; color: #666; }.son:before { content: counters(count, '-') '. '; counter-increment: count; font-family: arial black; }</style>
</head>
<body>
<ul class="father"><li class="son">我的爱好<ul class="father"><li class="son">爬山</li><li class="son">追剧</li><li class="son">旅游</li></ul></li><li class="son">我的偶像<ul class="father"><li class="son">王昱珩<ul class="father"><li class="son">最强大脑第二季选手</li><li class="son">最强大脑第五季水之队队长</li></ul></li><li class="son">胡歌</li><li class="son">陈默</li></ul></li><li class="son">web前端</li><li class="son">啦啦啦啦啦</li>
</ul>
</body>
</html>
如下图所示
是不是很奇妙,就出现了上面的效果
⑤counters()也是支持style自定义递增形式的。
counters(name, string, style)
与counter()的style参数使用一致,不赘述。
注意:
一个元素,如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性(针对支持浏览器),则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。
学完了,让我们一起来看看一些有意思的小实例吧!
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>counter小实例</title><style>#box{width:300px; height:300px; background:greenyellow; padding:30px; margin:100px auto;counter-reset:count;}lable{margin-left:20px;}.check{counter-increment:count;}.count:after{color:red; font-size:20px; content:counter(count);}</style>
</head>
<body>
<div id="box"><p>选出你喜欢的他或她</p><input type="checkbox" /><lable>胡歌</lable><br/><input type="checkbox" /><lable>王昱珩</lable><br/><input type="checkbox" /><lable>鲍云</lable><br/><input type="checkbox" /><lable>梁紫晨</lable><br/><input type="checkbox" /><lable>陈默</lable><br/><input type="checkbox" /><lable>唐嫣</lable><br/><input type="checkbox" /><lable>杨幂</lable><br/>
<span class="count">你总共选择了</span><span>位</span>
</div>
<script>var aIpt = document.getElementsByTagName('input');var len = aIpt.length;for(var i=0;i<len;i++){aIpt[i].index = i;aIpt[i].onclick = function(){if(this.checked){this.className='check';}else{this.className='';}}}
</script>
</body>
</html>
上面的是效果图,下面的总数会随着你选择的人数而不断变化,是不是很简单啦
由于计数器是伪元素控制显示的。因此,我们几乎可以应用各种CSS样式,各种定位等。所以,基本上,只要有有序序号呈现的地方,就能使用CSS计数器。
嗯、分享结束,内容有点长,主要是想要一次把这些知识搞清楚,有耐心的看完了,一定会有所收获的。
css中的counter计数器相关推荐
- css4个伪元素,CSS_CSS3中的content属性使用示例,CSS中主要的伪元素有四个:befo - phpStudy...
CSS3中的content属性使用示例 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个conte ...
- css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性 发布时间:2020-09-23 14:26:58 来源:亿速云 阅读:83 作者:小新 这篇文章主要介绍css中如何使用counter-reset属性, ...
- CSS中的伪类和伪元素(详细)
这篇想要跟大家分享的是css中的伪类和伪元素,有任何问题可以私聊我或者评论哦! 首先,我们先来想一下 一.引入伪类跟伪元素的原因? 伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述 比如CSS ...
- css如何动态计算,CSS中的动态计算
自从CSS的calc()函数得到浏览器的支持起,在CSS中就可以做一些简单的数学运算.如果你阅读过 图解CSS系列 中的 <CSS函数>一文的话,你会发现现在或将来有更多的函数可以直接帮助 ...
- CSS中content属性的妙用
前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
- python中的counter()、elements()、most_common()和subtract()函数的用法
python中的counter().elements().most_common()和subtract()函数的用法 counter()方法: class collections.Counter([i ...
- python3 开发面试题(collections中的Counter)6.7
''' 编写Python脚本,分析xx.log文件,按域名统计访问次数xx.log文件内容如下: https://www.sogo.com/ale.html https://www.qq.com/3a ...
- MapReducer Counter计数器的使用,Combiner ,Partitioner,Sort,Grop的使用,
一:Counter计数器的使用 hadoop计数器:可以让开发人员以全局的视角来审查程序的运行情况以及各项指标,及时做出错误诊断并进行相应处理. 内置计数器(MapReduce相关.文件系统相关和作业 ...
- css 中的 content-visitly 提升渲染性能
content-visibility 新的css属性,可显著提升渲染性能 译文:原文链接:https://web.dev/content-visibility/ 本文介绍CSS的新属性 content ...
- css中float用法
文档流:浏览器根据元素在html文档中出现的顺序,从左向右,从上到下依次排列. 浮动属性是CSS中的定位属性,用法如下: float: 浮动方向(left.right.no ...
最新文章
- seaborn将图例放置在图像外部并使用move_legend函数将图例(legend)放置在图像的顶部top(多组图例)
- cogs 1430. [UVa 11300]分金币
- RAC 实例不能启动 ORA-1589 signalled during ALTER DATABASE OPEN
- 设计模式的理解:单例模式(Singleton)
- GitHub 基本常用知识解答
- TensorflowSharp 简单使用与KNN识别MNIST流程
- android layerlist bitmap,android shape类似的 另一个 高端用法:layer-list
- JEECG 树列表操作总刷新列表,需要重新展开问题 【官方补丁,适用所有版本】
- matlab2c使用c++实现matlab函数系列教程-tanh函数
- controller报错MissingServletRequestParameterException: Required xxx parameter ‘xxx’ is not present
- Controller的生命周期是Transient还是PerWebRequest?
- 子网地址和广播地址的计算
- 彻底关闭Adobe Flash Player的弹窗广告(不影响Flash正常使用)
- 银行合规程序KYC、CDD、AML和TM
- 编译原理:什么是编译程序?
- 塞力斯是鸿蒙系统吗,赛力斯“驼峰”智能增程系统为何物?一亮相就引起行业沸腾...
- 关于android某些手机java.lang.UnsatisfiedLinkError: No implementation found for ......的问题
- 【软件服务外包概论】软件服务外包概论知识点整理
- 浅析B树、B+树插入删除操作(附代码实现)
- web移动开发总结(四)
热门文章
- html实现视频录制,保存和回放
- 锋迷商城spring-vue项目流程和笔记
- 为什么腾讯微云显示服务器繁忙,谁知道腾讯微云是干什么?
- 吉他软件打谱常用的的音符时值
- RecyclerView 删除元素后,点击报 IndexOutOfBoundsException 解决方法
- Python脚本系列:拳皇13一键出招以及连段实现!谁打得过我?
- 泰坦尼克号生存预测 (Logistic and KNN)
- 操作系统动态分区分配方式C/C++语言(首次适应算法(FF)循环首次适应算法(NF)最best适应算法(BF)最坏适应算法(WF))
- unity 卡通动物 shader 包含边缘光,ramp,描边
- vs2019 vs2022番茄助手重新安装失败问题处理