组成:2属性,1方法

  • 属性1: counter-reset 命名
  • 属性2: counter-increment 启动/自增
  • 方法 : counter()/counters() 调用方法

1.计数器 命名(初始化)[counter-reset]

selector{counter-reset:counter-name 初始值;}
#初始值默认=0,一旦启动时counter-increment自动+1,所以序列号从1开始
#counter-name=none,计数器无效

PS. 计数器命名语句须绑定在父元素层。

- 例 1.1:

p{counter-reset:paragraph_list;}
.class >h1{counter-reset:class_list;} # 可结合各类选择器
div{counter-reset:list1 list2 list3...;} # 可同时命名无限多计数器,但须为同父的兄弟元素。

- 例 1.2:

div ul{counter-reset:ul_list 2;}    # 计数器起始值=2
#demo a{counter-reset:demo_list 2.99;} 启动值为小数,IE和FireFox无法识别,chrome识别向下取整=2. /也可为负值,见后面例子。

2.计数器 自增&启动[counter-increment]

selector::before/after{
content:counter(counter-name,list-style-type);
counter-increment:counter-name 步长;
}
  • [counter-increment]可以放置于任何位置,如:
# 和命名器reset放在一起
div{counter-reset:list1;counter-increment:list1;}
# 虽然自增一次,但由于无content,所以暂时不显示。
# 和显示器content放在一起
p::before{content:counter(list2);counter-increment:list2;}
# 也可以单独放置
p{counter-reset:list;}
p::before{content:counter(list);}
p{counter-increment:list;}
  • 不论放置何处,每出现一次,计数器整体自增一次。
# 例如:
ul{counter-reset:ulist;counter-increment:ulist;}
ul li::{content:counter(ulist);counter-increment:ulist;}
结果:li前序列号+2

3.方法counter()

counter()计数器通常用于给各分部前/后定制序列,其中before/after、content、counter常组合使用。

  • content= [显示的内容]
  • counter(counter-name,list-style-type)= [调用计数器名,计数器样式可选参数]
列表样式:list-style-type,如:数字(默认=decimal)
disc: 点
circle: 圆圈
square: 正方形
decimal: 数字
decimal-leading-zero: 十进制数,不足两位的补齐前导0,例如: 01, 02, 03, ..., 98, 99
lower-roman: 小写罗马文字,例如: i, ii, iii, iv, v, ...
upper-roman: 大写罗马文字,例如: I, II, III, IV, V, ...
lower-greek: 小写希腊字母,例如: α(alpha), β(beta), γ(gamma), ...
lower-latin: 小写拉丁文,例如: a, b, c, ... z
upper-latin: 大写拉丁文,例如: A, B, C, ... Z
none: 无(取消所有的list样式)
inherit:继承

4.一些变化&应用

▲ 计数器嵌套:

# HTML:
<div>
<p>This is a paragraph 1</p>
<p>This is a paragraph 2</p>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<p>This is a paragraph 3</p>
</div>
# CSS:
div{counter-reset:plist;}
ul{counter-reset:ulist;}
p::before{content:counter(plist)'. ';counter-increment:plist;}
li::before{content:counter(plist)'.'counter(ulist)' ';counter-increment:ulist;}
# 可以使用counter(counter-name1)+counter(counter-name2)拼接的方式得到序列号的拼接序列,如:2.1/ 2.2/ 2.3

结果:

1.This is a paragraph 1

2.This is a paragraph 2

●2.1 text

●2.2 text

●2.3 text

3.This is a paragraph 3


▲ 计数器倒序

HTML:
<dl id="dl_1">
<dt>Paragraph</dt>
<dd>This is a paragraph</dd>
<dd>This is a paragraph</dd>
<dd>This is a paragraph</dd>
<dd>This is a paragraph</dd>
</dl> CSS:
#dl_1{counter-reset:dl_1 5;}
#dl_1 dd::before{content:counter(dl_1)'. ';counter-increment:dl_1 -1;}

结果:

Paragraph

   4.This is a paragraph

   3.This is a paragraph

   2.This is a paragraph

   1.This is a paragraph


▲ 计数器&子目录

# CSS:
dl{counter-reset:dtl;}
dt{counter-reset:ddl;}
dt::before{content:counter(dtl)'.';counter-increment:dtl;}
dd::before{content:counter(ddl)'. ';counter-increment:ddl;}
# HTML
<dl>
<dt>木曜</dt>
<dd>SQL</dd>
<dd>CSS</dd> <dt>水曜</dt>
<dd>Python</dd>
<dd>Data Structure</dd> <dt>火曜</dt>
<dd>JavaScript</dd>
<dd>Algorithm</dd>
</dl>

结果:


△ 计数器合并

HTML:
<div>
<p>text</p>
<p>text</p>
<p>text</p>
<h2>text</h2>
<h2>text</h2>
<h2>text</h2>
</div>
div{counter-reset: pl hl;}
p::before{content:counter(pl);counter-increment:pl;}
h2::before{content:counter(hl);counter-increment:hl;}

结果:

修改h2计数器:

# h2也改用p的计数器pl;
div{counter-reset: pl hl;}
p::before{content:counter(pl);counter-increment:pl;}
h2::before{content:counter(pl);counter-increment:pl;}

结果:

△结论:使用同一个计数器会使得不同标签列表归为同一个序列。


▲ 多个不同标签的counter选择同一个样式

<div>
<p>text</p>
<em>text</em>
<strong>text</strong>
<h2>text</h2>
<q>text</q>
<a href="#">text</a>
</div> div{counter-reset:pl;}
p::before,em::before,strong::before,h2::before,q::before,a::before{content:counter(pl)'. ';counter-increment:pl;}

# 也许少量标签还可以这样写,大量的话建议使用组合器,例如上例可写成
div {content:counter(pl)'. ';counter-increment:pl;}
# div+空格{}一次选取所有子元素

例 ②

▲ HTML:
<div>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
▲ CSS:
div{counter-reset:heading;}
p::before{content:counter(heading);counter-increment:heading;}
p::after{content:counter(heading);counter-increment:heading;}

#counters 嵌套计数

基本语法:

counters(name, string);
  • string参数为字符串(需要引号包围的)(必须参数),表示子序号的连接字符串。例如1.1的string就是'.', 1-1就是'-'.
  • 要想实现嵌套,必须让每一个列表容器拥有一个独立的“counter-reset”,通过子辈对父辈的counter-reset重置、配合counters()方法才能实现计数嵌套效果。

▲ 下例来自http://www.zhangxinxu.com/

# CSS代码:
.reset { padding-left: 20px; counter-reset: wangxiaoer; line-height: 1.6; color: #666; }
.counter:before { content: counters(wangxiaoer, '-') '. '; counter-increment: wangxiaoer; font-family: arial black; } # HTML代码:
<div class="reset">
<div class="counter">我是王小二
<div class="reset">
<div class="counter">我是王小二的大儿子</div>
<div class="counter">我是王小二的二儿子
<div class="reset">
<div class="counter">我是王小二的二儿子的大孙子</div>
<div class="counter">我是王小二的二儿子的二孙子</div>
<div class="counter">我是王小二的二儿子的小孙子</div>
</div>
</div>
<div class="counter">我是王小二的三儿子</div>
</div>
</div>
<div class="counter">我是王小三</div>
<div class="counter">我是王小四
<div class="reset">
<div class="counter">我是王小四的大儿子</div>
</div>
</div>
</div>
# 某项的分支必须包含在某项标签内
<div>
<p>text</p>
<p>text</p>
</div>




▲ 我也写个例子:

※ HTML :
<dl class='reset'>
<dt class='counter'>星期一</dt>
<dt class='counter'>星期二</dt>
<dt class='counter'>星期三
<dl class='reset'>
<dd class='counter'>上午
<dl class='reset'>
<dd class='counter'>9:00-10:00</dd>
<dd class='counter'>10:00-12:00</dd>
</dl>
</dd>
<dd class='counter'>下午</dd>
</dl>
</dt>
<dt class='counter'>星期四</dt>
<dt class='counter'>星期五
<dl class='reset'>
<dd class='counter'>上午</dd>
<dd class='counter'>下午</dd>
</dl>
</dt>
</dl>
.reset{counter-reset:date;color:green;}
.counter::before{content:counters(date,'.')'∽';counter-increment:date;}

计数器:counter的更多相关文章

  1. 计数器(counter),有序字典(OrderDict),默认字典(defaultdict),可命名元祖(namedtuple),双向队列(deque),单项队列(deuqe.Queue)

    Python_Day_05 计数器(counter),有序字典(OrderDict),默认字典(defaultdict),可命名元祖(namedtuple),双向队列(deque),单项队列(deuq ...

  2. JMeter 配置元件之计数器Counter

    配置元件之计数器Counter   by:授客 QQ:1033553122 测试环境 apache-jmeter-2.13 1.   计数器简介 允许用户创建一个在线程组范围之内都可以被引用的计数器. ...

  3. 028_MapReduce中的计数器Counter的使用

    一.分析运行wordcount程序屏幕上打印信息 ##运行wordcount单词频率统计程序,基于输出输出路径. [hadoop@hadoop-master hadoop-1.2.1]$ hadoop ...

  4. CSS计数器:counter

    最近的需求,明星字体销售排行榜中,需要对字体的销售情况进行排序. 在早期,只有ol和ul可以对子元素li进行排序:如果不使用这两个标签,就由前台开发去手动填写序号. 当然,在这个需求中,数据不是实时更 ...

  5. Python_Day_05 计数器(counter),有序字典(OrderDict),默认字典(defaultdict),可命名元祖(namedtuple),双向队列(deque),单项队列(deuqe.Queue)

    Counter(计数器) 是一个字典的子类,存储形式同样为字典,其中存储的键为字典的元素,值为元素出现的次数,在使用之前我们需要先导入文件 import collections 初始化一个计数器 im ...

  6. Cassandra 计数器counter类型和它的限制

    文档基础 Cassandra 2.* CQL3.1 翻译多数来自这个文档 更新于2015年9月7日,最后有参考资料 作为Cassandra的一种类型之一,Counter类型算是限制最多的一个.Coun ...

  7. 计数器counter

    今天就讲了2个属性:1.计数器 2.列规则 列规则很简单:column-count:3; (列的具体个数) column-width:30px;(列宽)N个浏览器不兼容column-gap:10px; ...

  8. Jmeter -----计数器(counter)

    计数器的定义 Allows the user to create a counter that can be referenced anywhere in the Thread Group. The ...

  9. jmeter 配置元件之计数器Counter

    用jmeter生成数据 我用过几种以下几种方法 1.CSV Data Set Config  参数化 2.${_Random} ${_Random}是jmeter函数助手里面自带的一个函数,作用是返回 ...

  10. 解读:计数器Counter

    Counters: 44 File System Counters FILE: Number of bytes read=655771325 FILE: Number of bytes written ...

随机推荐

  1. hdu-5718 Oracle(水题)

    题目链接: Oracle Time Limit: 8000/4000 MS (Java/Others)     Memory Limit: 262144/262144 K (Java/Others) ...

  2. 理解Objective-C Runtime(三)消息转发机制

    消息转发机制概述 上一篇博客消息传递机制中讲解了Objective-C中对象的「消息传递机制」.本文需要讲解另外一个重要问题:当对象受到无法处理的消息之后会发生什么情况? 显然,若想令类能理解某条消息 ...

  3. darwin Stream Server源码分析

    摘要 ​所谓的流式媒体简单的讲就是指人们通过网络实时的收看多媒体信息:如音频流.视频流等.与流式媒体对应的传统工作方式是下载+播放模式,即用户首先下载多媒体文件,然后再在本地播放,这种方法的一个主要缺 ...

  4. robotframework之APP混合H5自动化测试

    app中有webview的情况 手机淘宝的天猫国际页面是一个webview robotframework代码: *** Settings *** Suite Setup Suite Teardown ...

  5. 移动端网页巧用 margin和padding 的百分比实现自适应

    一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素 ...

  6. IOS:程序的退出、App间的跳转

    今天在做一个音乐播放器的项目,发现这个点击退出程序的功能不能实现终于找到了一些有用的资料,就去网上看了半天资料,下面是退出程序的代码: 在动画里面可以自己添加一些,动画,达到相应的效果. AppDel ...

  7. E20170414-ms

    collapse v/n 奔溃,垮台 constraint  n 约束,限制 adaptive  adj 适应的; 有适应能力的; exhausitive adj. 详尽的; store n 商店,仓 ...

  8. ObjectARX学习笔记

    http://blog.csdn.net/jangdong/article/category/1642265/3 http://blog.csdn.net/u011331383/article/cat ...

  9. Codeforces 2 A. Winner

    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈....... 先让我笑完................ 就是一道撒比题啊,一开始是题目看错= =.是,但是后面还是自己不仔细错的.....不存在题目坑这种情况 ...

  10. bzoj 4589: Hard Nim【线性筛+FWT+快速幂】

    T了两次之后我突然意识到转成fwt形式之后,直接快速幂每次乘一下最后再逆回来即可,并不需要没此次都正反转化一次-- 就是根据nim的性质,先手必输是所有堆个数异或和为0,也就变成了一个裸的板子 #in ...