css样式计数器,详细介绍CSS计数器
css计数器效果是指使用CSS代码实现随元素的数目增多, 数值也跟着变大的效果, 有点类似于
- , 但是比ol更灵活。
(推荐教程:css视频教程)
CSS计数器有两个属性 (counter-reset 和 counter-increment) 和一个方法 (counter() / counters()), 下面以次讲解:
1. counter-reset
属性counter-reset顾名思义就是 计数器-重置 的意思, 其实主要作用就是给计数器起个名字, 如果可能, 顺便告诉下从哪个数字开始计数, 默认是0, 注意默认是0, 而不是1, 在网上可能会看到有很多例子默认显示的第一个数字都是1, 而不是0, 这是因为受到 counter-increment 的影响, 后面详细讲解
先看一个简单的例子
counter-reset: resetname 2;
font-size: 24px;
color: #f66;
}
.counter:before {
content: counter(resetname);
}
如果将conter-reset 后面的2去掉, 那下面出现的数字就是 0
counter-reset 的计数重置可以是复数, 如 -2, 也可以是小数, 如 2.99, 不过, IE和FireFox对此都不认识, 认为是不合法的数值, 会当做0来处理, 在Chrome下, 任何小数都是向下取整, 如 2.99 会当成 2 来处理.
你以为到此为止了? 当然不是! counter-reset还有一手, 就是多个计数器同时命名, 列如:.counter {
counter-reset: first 2 second 3;
font-size: 24px;
color: #f66;
}
.counter:before {
content: counter(first);
}
.counter:after {
content: counter(second);
}
另外, counter-reset 还可以设置为 none, 和inherit, 取消重置以及继承重置.
2. counter-increment
属性 counter-increment 顾名思义就是 计数器递增的意思, 值为counter-reset的一个或者多个关键字, 后面可以跟数字, 表示每次计数的变化值, 如果省略则使用默认变化值 1
CSS计数器的技术有一套自己的规则, 我们称之为 "普照规则", 具体来讲就是, 普照源 (counter-reset) 唯一, 每普照(counter-increment)一次, 普照源增加一次计数
于是就能解决上面所说的 "默认值0"的问题了, 通常我们在使用计数器的时候, 都会使用counter-increment , 这个肯定要用, 不然怎么递增呢..counter {
counter-reset: incerment 2;
counter-increment: incerment;
font-size: 24px;
color: #f66;
}
.counter:before {
content: counter(incerment);
}
这个普照元素也可以写直接写到为元素上, 效果和上面一样, 也是递增1, 如果父元素和子元素都写了, 那么父元素递增一次, 子元素递增一次, 最后的结果就是递增两次
正如之前提到的, 这个变化值不一定都是1, 可以灵活设置, 比如counter-increment: incerment 2;
变化值也可以是负数, 比如:.counter {
counter-reset: incerment 5;
counter-increment: incerment -2;
font-size: 24px;
color: #f66;
}
.counter:before {
content: counter(incerment);
}
值也可以是none 和 inherit
3. counter()/counters()
这两个是方法, 不是属性, 类似于CSS3中的 calc(), 这里的作用就是显示计数, 不过名称和用法有多个
比如上面用到的 counter(name), 就是显示计数
还可以写成 counter(name, style)
那么这个style是什么呢, 它支持的关键字就是 list-style-type 所支持的那些, 它的作用就是我们的递增和递减不一定都是数字, 也可以使英文字母或者别的
list-style-type:
disc | circle | square | decimal | decimal-leading-zero |
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |
armenian | georgian | none | inherit.counter {
counter-reset: styleType 2;
font-size: 24px;
color: #f66;
}
.counter:before {
counter-increment: styleType;
content: counter(styleType, lower-roman);
}
counter 还支持级联, 也就是说, 一个content 属性可以有多个 counter() 方法.counter {
counter-reset: cascaderOne 2 cascaderTwo 3;
font-size: 24px;
color: #f66;
}
.counter:before {
content: counter(cascaderOne) '\A' counter(cascaderTwo);
white-space: pre;
}
下面介绍一下 counters() 方法, 看似只比counter多个 s , 但却有着不同的意思, counters 几乎可以说是嵌套计数器的代名词.
我们平时写的时候不可能都是1, 2, 3, ..., 还有比如 1.1, 1.2, 1.3...等类似的序号, 前者就是counter()干的事, 后者就是counters()干的事
counters的基本用法counters(name, string, style);
其中 string 参数是字符串, 需要用引号包含, 是必须参数, 表示子序号的连接符, style还是和counter的第二个参数一样
下面一个完整的demo:
content
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
.reset {
padding-left: 20px;
counter-reset: fe;
}
.counter:before {
content: counters(fe, '.') '. ';
counter-increment: fe;
}
相关推荐:CSS教程
css样式计数器,详细介绍CSS计数器相关推荐
- dw在html中删除css样式表,DW里CSS的详细介绍
单击"确定". 类 型 属 性 [定义 CSS 类型属性]使用"CSS 样式定义"对话框中的"类型"类别能够定义 CSS 样式的基本字体和类 ...
- css样式lighter的意思,css常用的属性
CSS------属性值篇 display: none | block | inline(默认值) | inline-block(css2新增) | inherit none :此元素不会再显示 {注 ...
- dw怎么让html使用css样式,dw怎么用css样式?
dw怎么用css样式? 首先介绍一下CSS样式的属性: CSS样式属性被分为八大类:类型,背景,区块,方框,边框,列表,定位,扩展. 类型主要定义文本的字体,大小,颜色,行高和修饰等.如图所示: 方法 ...
- php怎么给超链接设置样式,HTML基础知识,关于超链接设置的样式的详细介绍
这次给大家带来HTML基础知识,关于超链接设置的样式的详细介绍,设置HTML的超链接样式的注意事项有哪些,下面就是实战案例,一起来看一下. ***设置超链接的样式示例 a:link 超链接被点前状态 ...
- 用CSS样式下载器 下载CSS里面的图片路径配对问题
2019独角兽企业重金招聘Python工程师标准>>> 用CSS样式下载器 下载CSS里面的图片路径配对问题 路径如下图: 这时候在CSS样式下载器选择[相对路径加网址前缀]然后在输 ...
- 前端-CSS样式的简单介绍
CSS CSS的作用是调整HTML标签的样式,美化网页的界面 CSS的结构 每个CSS都由两个部分组成,分别是选择器与属性 选择器用于选择要修改样式的标签 属性是标签内要具体修改的内容 p {colo ...
- javascript(JS与css交互)详细介绍
一,JS与css交互基本概述 css有三种设置样式:行内样式,内部样式及外部样式 JavaScript获取css样式分两种情况:行内样式获取法和非行内样式获取法. 行内样式 通过element.sty ...
- 网页css样式中英对照,css中文样式(含中英文对照表).doc
css中文样式(含中英文对照表) CSS学习网站: /css/css_reference.asp / /thread-265-1-1.html 1.[类型]主要针对网页中的文本 [背景]是在网页的元素 ...
- html css样式div属性,div css
DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是 ...
最新文章
- 哈工大百年校庆!为国防航天而生,高文王海峰刘挺等AI大牛都是校友
- 黑客可以让协作机器人成为杀手
- ubuntu dig timeout解决方法,dnscat执行失败也是这个原因
- hive 添加UDF(user define function) hive的insert语句
- python图片马赛克_python 检测图片是否有马赛克
- [转载]轻松玩转LCD12864-基于AVR单片机的LCD12864串行显示
- 程序员修神之路--分布式缓存的一条明路(附代码)
- sqoop将hive导出到mysql_Sqoop hive导出到mysql[转]
- 你可能对position和z-index有一些误解
- LSGO软件技术团队爬山活动
- python自己做个定时器_python 创建一个自己的类计时器
- 作者:王雨华(1970-),男,中国科学院昆明植物研究所研究员、副所长
- nginx开发(二)配置mp4文件在线播放
- centos 命令行执行多个命令_命令行如何执行jar包里面的方法
- 【转】基于Ubuntu 14.04 LTS编译Android4.4.2源代码
- 美国人太嚣张(爆笑呀!)
- 计算机科学导论考试A卷试题,计算机科学导论试题A答案
- 华为OD机试(JAVA)真题22版
- MTK nvram介绍
- 计算机无法识别点读笔,点读笔插电脑上不识别
热门文章
- 最全解决 PKIX问题方案:sun.security.validator.ValidatorException: PKIX path building failed:
- 开关电源-下拉电阻有什么作用
- 20155227 2016-2017-2 《Java程序设计》第七周学习总结
- 互联网摸鱼日报(2022-11-27)
- 破茧成蝶——用户体验设计师的成长之路
- 微信语音麦克风静音_微信正在语音通话的时候我按了静音,然后用手机看视频对方能听见吗?...
- netscaler添加普通账户
- 数据库的查找操作(题)
- 数据结构之C++实现顺序表(SeqList)无主函数
- CRM软件厂商排名?CRM管理软件厂商怎么选?