CSS 伪元素 counter-increment的多种用法
之前已经对CSS content属性进行了大概的了解,我们知道content中有一个counter属性(计数器),而使用counter的过程中我们要使用到counter-increment来递增一个或多个计数器值,其实counter-increment和counter-reset一样还有不同的玩法,这篇文章就来单独的为counter-increment属性写几个小demo记录一下:
1、counter-increment属性用来递增一个或多个计数器,counter-increment属性通常是和counter-reset属性,content属性一起使用。
2、counter-increment的属性值:
值 | 说明 |
---|---|
none | 默认。不能对选择器的计数器进行重置 |
id number | id 定义重置计数器的选择器、id或class。number 可以设置此选择器出现次数的计数器的值 |
inherit | 规定应该从父元素继承counter-reset属性的值 |
3、计数器是通过counter-reset
和counter-increment
操作,然后通过counter()
或counters()
函数来显示在页面上。
1)counter-increment属性默认为计数器自增1,我们也可以通过第二个参数来进行自定义。
counter-increment: record; /* 为计数器每次自增 1(默认) */
counter-increment: record 2; /* 为计数器每次自增 2 */
2)下面我们写一个小demo:
<body><h3>lalala</h3><h3>lalala</h3><h3>lalala</h3>
</body>
body{counter-reset: first; /* 创建一个计数器first*/
}
h3:before {content: counter(first)": " ;
}
h3 {counter-increment: first 2; /* 为计数器first每次增加2 */
}
见效果:
3)我们还可以通过counter-reset来设置一个大点的初始值,然后使用counter-increment来进行递减,下面我们就来对上面的css代码进行修改:
body{counter-reset: first 10;
}
h3:before {content: counter(first)": " ;
}
h3 {counter-increment: first -1;
}
效果:(可见counter-increment非常的灵活)
你要去做一个大人,不要回头,不要难过。
“我们就这样,各自奔天涯。”
CSS 伪元素 counter-increment的多种用法相关推荐
- css伪元素before和after用法详解
css伪元素before和after用法详解 要想了解伪元素before和after到底是什么,首先就应该打开编译器敲入代码并在浏览器运行检查 <!DOCTYPE html> <ht ...
- CSS伪元素::before,::after
W3C的解释用一句话概括:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素中. css伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html页面中没有对应的元素,但是其所有用 ...
- 详解CSS伪元素::marker
::marker介绍 ::marker CSS pseudo-element(CSS伪元素) 选中一个list item的marker box,后者通常含有一个项目符号或者数字.它作用在任何设置了di ...
- css中什么是伪元素,CSS伪元素是什么?
什么?伪元素?之前不是说了伪类吗,怎么又跑出来一个伪元素吗?它们不是一样的吗?呵呵,其实伪类和伪元素是两个不同的概念,今天小编就为大家介绍一下伪元素. 一.什么是伪元素 css伪元素代表了某个元素的子 ...
- CSS伪元素的基本使用
CSS伪元素的基本使用 上一篇文章介绍了很多个伪类的使用,这篇来说一下伪元素. 伪元素之所以称为"伪",主要是因为它不是真正网页里的元素,但是标线行为又跟真正网页元素一样,也可以对 ...
- html中伪元素怎么更改图片,如何改变css伪元素的样式
本篇文章介绍了如何改变css伪元素样式的方法,希望对学习前端css的朋友有帮助! 一.CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果. 伪元素的用法如下:selector:pseudo-el ...
- css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是 类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑 它们 都 ...
- css 商城 两列_如何使用css伪元素实现超实用的图标库(附源码)
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识 伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
- 用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...
- [JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
最新文章
- IntelliJ IDEA 2021.1正式发布!快来看看又有哪些神仙功能加入!
- DevExpress.GridControl.gridView的一些注意
- 关掉linux下的讨厌的beep声
- 浅谈RTS游戏网络同步:3种同步机制模式的实现
- linux怎么新建系统用户名,在 Linux 中不使用 useradd 命令如何创建用户账号
- 安装jenkins环境之jdk8
- 题目:企业发放的奖金根据利润提成。利润(I)低于或等于10万元时,奖金可提10%; 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可可提成7.5%; 20万到4
- mysql的数据库的索引_MySql数据库索引原理
- [渝粤教育] 云南大学 大学生创新创业教育 参考 资料
- 如何不用ps来吸取颜色并将颜色一键插入到网页,自动生成代码?
- 参数化CFAR的FPGA实现
- @Aspect 注解使用详解
- 新手也可以制作出大片的效果——Movavi Video Editor 15 Plus Mac
- TunesKit Audio Converter for Mac(音频格式转换软件)
- 关于ppt无法添加页码的解决办法
- 板内盘中孔设计狂飙,细密间距线路中招
- 2012年5月《苹果的安全之缺》
- python怎么画长方形_Python如何绘制长方形?
- angularjs2入门实例(2)
- 16求计算机科学与技术鲁嘉华第三章作业
热门文章
- 长沙理工大学计算机网络试题,长沙理工大学考试试卷(计算机网络)祥解.doc
- 流量治理选开源还是自研,有点小纠结
- Touch Sensor 触摸传感器模块
- (C语言)编一程序,,输入月份号,输出该月的英文月名,例如,输入3,则输出March,要求用指针数组处理
- Docker安装nacos
- 前端模块化工具 Browserify
- 多个超声波读取模块(ROS)
- SteamVR2.0 UGUI射线交互模拟
- 已重置应用默认设置html,Win10总提示已重置应用默认设置怎么解决?
- 2021洪湖一中高考成绩查询,2021湖北省高中排名一览表