概念

CSS3计数器(CSS Counters)可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能(自定义有序列表)

与有序列表相比,它的突出特性在于可以对任意元素计数,同时实现个性化计数

使用计数器步骤

  1. 定义计数器
  2. 设置计数器的增数规则
  3. 自定义列表样式
  4. 调用计数器

计数器属性

  • counter-reset:定义计数器,包括初始值、作用域等
  • counter-increment:设置计数器的增数规则(一般都是用默认,即值只设置了计数器名称,未设置增数规则)
  • counter()/counters():在content属性中使用,用来调用计数器
  • @counter-style:自定义列表样式

counter-reset语法

counter-reset:[<identifier><integer>?]+|none|inherit

用来定义计数器的名称、初始值和作用域,默认值为none

<identifier>:计数器名称

<integer>:计数器的初始值,可以不写,默认为0

注意:当元素display为none时,该属性失效

counter-increment语法

counter-increment:[<user-ident><integer>?]+|none

用来设置计数器的增数规则,默认值为none(阻止计数器增加)

<user-ident>:需要增数的计数器名称

<integer>:计数器增数的值,可以为负值,默认是1

我们可以同时设置多个计数器增数规则

注意:当元素display为none时,该属性失效

counter()语法

content:[<counter>]+

<counter>=counter(name)| 直接调用计数器名称 可得到1,2,3

counter(name,list-style-type)| 调用计数器名称,并指定计数器列表样式

counters()语法

content:[<counter>]+

<counter>=counters(name,string)| 嵌套计数器时,设置间隔的字符串 可得到1.1,1.2,1.3

counters(name,string,list-style-type) 嵌套计数器时,设置间隔字符串并指定样式

注意:使用计数器,需要结合:before和:after使用。可以同时使用多个计数器

@counter-style语法

@counter-style counterStyleName{

system:算法

range:使用范围

symbols/ additive-symbols:符号

prefix:前缀

suffix:后缀

pad:补零

negative:负数策略

fallback:出错后的默认值

speakas:语音策略

}

计数器demo

CSS计数器(自定义列表)的更多相关文章

  1. CSS计数器(序列数字字符自动递增)详解———张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4303 一.挖坟不可耻 ...

  2. 使用CSS计数器美化数字有序列表

    在web设计中,使用一种井井有条的方法来展示数据是十分重要的,这样用户就可以很清晰的理解网站所展示的数据结构和内容,使用有序列表就是实现数据有组织的展示的一种简单方法. 如果你需要更加深入地控制有序列 ...

  3. 排行榜妙用——CSS计数器

    碰到的坑 小伙伴你们是否有碰到以下的情况,排行榜前3名的样式不一样,你们是怎么处理的么?

  4. css计数器详解

    什么是css计数器 体验更佳排版请戳原文链接:http://blog.liuxianan.com/css-counters.html 就是采用css给一些html元素自动生成编号,比如类似1.3.2这 ...

  5. 转载:CSS计数器的趣味时光之css计算数据

    CSS计数器是“啊太好了,竟不知道CSS可以做这啊”这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器 我们从这个简单的分页示例开始: 你见到的 ...

  6. CSS计数器的趣味时光

    CSS计数器是“啊太好了,竟不知道CSS可以做这啊”这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器 我们从这个简单的分页示例开始: 你见到的 ...

  7. 我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子

    昨天写的那篇文章<我教女朋友学编程Html系列(6)—Html常用表单控件>,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初 ...

  8. css中的列表样式

    在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化. 在css中对列表 ...

  9. CSS计数器妙用

    做web的经常会遇到类似排行榜的需求, 特别是要求前n名的样式和后面人不一样. 通常大多数人对于这个需求的做法都是在后端处理好排名名次, 在前端填入内容, 然后针对前n名做特殊的样式处理. 但是这样有 ...

随机推荐

  1. wechat开发笔记之1.线上环境搭建与测试

    Wechat开发笔记 线上环境搭建: 申请一个wechat公众平台. 手机个人微信可以用webwechat来测试. Website:https://web.weixin.qq.com/ 手机客户端扫一 ...

  2. python网络编程-socketserver模块

    使用socketserver 老规矩,先引入import socketserver 必须创建一个类,且继承socketserver.BaseRequestHandler 这个类中必须重写handle( ...

  3. Struts2_总结

    还未学习的内容,如果到时候要用到,再去学.1.Lamda 表达式(很复杂,很少用)2.验证框架(默认验证方法 validation.方法开始前验证.开始后验证)3.UI标签(用的不多)4.类型转换中的 ...

  4. ansible测试环境

    ip user sudo_user port usage 192.168.48.81 ansible root 29922 nagios & ansible control 192.168.4 ...

  5. 怎样解决putty终端乱码的方法

    原文地址:https://jingyan.baidu.com/article/3aed632e5f00ae701080913a.html?qq-pf-to=pcqq.c2c 终端输入:echo $LA ...

  6. Typora使用

    Typora使用 1.介绍 typora是一款不错的软件. 1.1 基本使用 html js css python java vb 1.2 无序列表 a b c d e f 1.3 java代码 pu ...

  7. STM32开发-MDK新建工程及配置

    本人也是接触stm32没多久,之前用的MDK是5.1,现在用的是5.13,MDK5.0之前的版本(本人简称旧版)和之后的版本(本人简称新版)新建工程有很大区别.对于刚开始用学stm32的新手来说,基本 ...

  8. C++学习之继承中的成员访问控制

    由基类到派生类的过程中,在派生类里如何访问基类成员,以及派生类对象如何访问基类成员,是根据派生类在从基类派生时是以什么方式进行的派生:public.protect或者private.下面说一下在这三种 ...

  9. Java中调用MatLab返回值

    当在Java中使用MatLab函数时,由于语言语法的不同,Matlab返回多个数据时,想在Java中获取到并进行使用.查阅了网上资料,翻箱倒柜加上自己实战,得出方法如下: 如MatLab函数返回的是N ...

  10. MySQL锁小结

    锁的作用:避免并发请求时对同一个数据对象同时修改,导致数据不一致.   怎么加锁: 1.事务T1在对某个数据对象R1操作之前,先向系统发出请求,对其加锁L1. 2.之后,事务T1对该数据对象R1有了相 ...