概念

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. SpringCloud的学习记录(6)

    这一章节讲fegin的使用. 在我们生成的Demo项目上右键点击New->Module->spring Initializr, 然后next, 填写Group和Artifact等信息, 这 ...

  2. Razor 语法糖常规用法

    1.隐匿代码表达式 例: @model.name 会将表达式的值计算并写入到响应中,输入时采用html编码方式 2.显示表达式 例:@(model.name)会将输入@model.name字符串 3. ...

  3. python模块详解 YAML和configparser

    YAML模块 主要用来做配置文件用的. yaml格式: 详细参考官方文档:PyYAML configparser模块 同样是用于生成和修改配置文件用的.格式和mysql一样. 生成配置文件 impor ...

  4. *387. First Unique Character in a String (linkedhashmap + string) debug manunally instead of using leetcode

    The ability to debug and overall thinking need to improve Given a string, find the first non-repeati ...

  5. IOS 运行循环

    . 运行循环========================================在iOS的应用程序中,应用程序启动之后,系统即会创建一个运行循环监听用户的交互. 以下代码其本质是在运行循环 ...

  6. 【HHHOJ】ZJOI2019模拟赛(十四)03.12 解题报告

    点此进入比赛 得分: \(50+5+24=79\) 排名: \(Rank\ 2\) \(Rating\):\(+79\) \(T1\):[HHHOJ197]古明地(点此看题面) 基本上全部时间都用来想 ...

  7. Gym 100090M Jumping along the Hummocks

    题意: 从 前往后跳,要么跳一步,跳到相邻的位置,要么跳到下一个数字相同的位置,求跳到最后的最少步数. dp,但是会tle,我用map优化了一下. #include <bits/stdc++.h ...

  8. 火车进站输出路径(HDU1022)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1022 解题报告: 思路: 就是维护好这个栈,只要它不是空,并且头部和ans相同,就一直出栈,直到不满足 ...

  9. 【[TJOI2018]碱基序列】

    题目 为什么没人用\(SAM\)啊 我们先把原来的模式串建一遍\(SAM\),之后我们就可以求出\(SAM\)上每一个节点的\(|endpos|\)就可以知道每一个子串出现的次数了,也就是在模式串上的 ...

  10. P1424 小鱼的航程(改进版)

    题目背景 原来的题目太简单,现改进让小鱼周末也休息,请已经做过重做该题. 题目描述 有一只小鱼,它上午游泳150公里,下午游泳100公里,晚上和周末都休息(实行双休日),假设从周x(1<=x&l ...