CSS 计数器详解
在前端开发中总少不了列表项,对于列表项序号,射鸡师一般会列出个1,2,3...序号。在不了解css计数器属性之前,我一般会用精灵图,用类名来区分序列号图片。这样做尽管可以达到目的,但是很不方便,开发过程耗时较长而且维护修改起来较困难。用css counter配合伪类的content完美的解决了这个问题,这里详细介绍下css counter属性
计数器属性介绍
计数器的值通过使用counter-reset 和 counter-increment 操作,在 content 上应用 counter() 或 counters()函数来显示在页面上。
counter-reset
设置计数器的名称和起始值
Name:counter-reset
Value: [ <custom-ident> <integer>? ]+ | none
Initial: none
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: the keyword none or a list, each item an identifier paired with an integer
Canonical order: per grammar
Animation type: by computed value type
custom-indent 计数器名字 可以同时命名多个计数器
integer 初始值 默认是0 也可以是负数
.counter{
counter-reset:sequence; /* 计数器名称是sequence */
}
.counter{
counter-reset:sequence 2; /* 计数器名称是sequence 且起始值是2*/
}
counter-increment
设置某个计数器每次计数的变化值。如果缺省,则使用默认变化值1
Name: counter-increment
Value: [ <custom-ident> <integer>? ]+ | none
Initial: none
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: the keyword none or a list, each item an identifier paired with an integer
Canonical order: per grammar
Animation type: by computed value type
custom-indent 计数器名字 可以同时命名多个计数器
integer 初始值 默认是1
counter()
这是个方法,不是属性,作用是用字符串或图片将计数器显示出来。这两个计算方法要和伪元素的 content 属性搭配使用。
用法一
content: counter(name)
counter 计算符前后可以随意加字符串来对最后的效果做拼接。可点击查看demo
用法二
content: 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
counters()
作用和counter()一样,差别是counters只用于多层嵌套
counters(name,string)
counters(name,string,style) /*style参数与counter相同*/
其中,string参数为字符串(需要引号包围的)(必须参数),表示子序号的连接字符串。例如1.1的string就是'.', 1-1就是'-'.
counters()实现多层嵌套demo
对比counter()和counters()实现的多层嵌套
counter()实现多层嵌套时,他的层级序号是手动拼起来的
counters()的多层嵌套则是嵌套层会自动带上其父层的嵌套序号
注意点
一个元素,如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性(针对支持浏览器),则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。
兼容性
IE8以上都兼容,所以在列表项排序的时候可以放心大胆地使用,
可点击查看caniuse结果
参考资料
CSS counter计数器(content目录序号自动递增)详解
CSS 计数器详解的更多相关文章
- css计数器详解
什么是css计数器 体验更佳排版请戳原文链接:http://blog.liuxianan.com/css-counters.html 就是采用css给一些html元素自动生成编号,比如类似1.3.2这 ...
- CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
- css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
- JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
- 带你走进CSS定位详解
学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...
- 此博客使用的CSS样式详解!
此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...
- CSS中详解hight属性
目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...
- (转)LR监控Linux系统性能计数器详解
从LR里面add measurement,填写linux机器的IP,出现所有unix/linux的计数器,包括cpu的,mem的,disk,network的.这里介绍几个常用的: (对于如何监控Lin ...
- 转:CSS圆角详解
CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...
随机推荐
- 万恶之源-python内容的进化
1.整数: int--计算和比较 整数可以进行的操作: bit_length().计算整数在内存中占用的二进制码的长度 2.布尔值 bool 布尔值--用于条件使用 True 真 ...
- Android 获取 SHA1值3步完成
未经允许,禁止
- Android中常见的设计模式
前言: Android开发的设计模式,基本设计思想源于java的设计模式,java的设计模式有N多种,据不完全统计,迄今为止,网络出现最频繁的大概有23种.Java只是一门开发语言,学会并掌握这门语言 ...
- 关于JDK源码:我想聊聊如何更高效地阅读
简介 大家好,我是彤哥,今天我想和大家再聊聊JDK源码的几个问题: 为什么要看JDK源码 JDK源码的阅读顺序 JDK源码的阅读方法 为什么要看JDK源码 一,JDK源码是其它所有源码的基础,看懂了J ...
- 2019-11-6:ubuntu安装配置JAVA环境
1,下载JAVA,官方java 18下载网站:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21331 ...
- 【NHOI2018】衰减
[解题思路] 显然这题并不难,由于数据范围较小,完全可以用DFS解决. 从原数开始每次变异的图谱,每次记录住当前的路径. 当找到1时就可以输出并回溯了. 小技巧:printf和scanf可以提高输出输 ...
- Android View 的添加绘制流程 (二)
概述 上一篇 Android DecorView 与 Activity 绑定原理分析 分析了在调用 setContentView 之后,DecorView 是如何与 activity 关联在一起的,最 ...
- 题解 P1226 【【模板】快速幂||取余运算】
1.题目分析 原题 本题在于快速幂的使用,以及对long long的应用问题. 2.解题思路 快速幂 求幂常见用法: int pow(int a,int b) { int ans; for(int i ...
- scrapy自动抓取蛋壳公寓最新房源信息并存入sql数据库
利用scrapy抓取蛋壳公寓上的房源信息,以北京市为例,目标url:https://www.dankegongyu.com/room/bj 思路分析 每次更新最新消息,都是在第一页上显示,因此考虑隔一 ...
- 微信浏览器跳转浏览器下载app解决方案
新版本微信浏览器中,已禁用下载APP应用,只支持打开微信合作商APP下载,所以无法通过微信浏览器直接下载APP应用.列举微信浏览器下载APP的种解决方案: 方案:通过Url 跳转到手机默认浏览器,或者 ...