CSS 计数器

李俊才的 CSDN 博客

邮箱：291148484@163.com

CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343

注：此时此刻正在编辑，暂时保存。请明天继续

本文地址：https://blog.csdn.net/qq_28550263/article/details/123934458

目录

1. CSS 计数器简介

1.1 什么是CSS计数器
1.2 CSS计数器样式

2. 使用计数器详解

2.1 再探@counter-style 规则
- 2.1.1 计算器样式名关键字
  - （1） disc
  - （2） circle
  - （3） square
  - （4） decimal
  - （5） decimal-leading-zero
  - （6） trad-chinese-informal
  - （7） lower-roman
  - （8） upper-roman
  - （9） lower-greek
  - （10） upper-latin
  - （11） disclosure-open 和 disclosure-closed
- 2.1.2 更多关键字
2.2 @counter-style中的可用属性
2.3 操作计数器的相关属性

1. CSS 计数器简介

1.1 什么是CSS计数器

计数器本质上是由 CSS 维护的变量，根据规则安装使用次数递增变量或者递减以达到计数的目的，其中按照递减规律计数的计数器称作反向计数器。使用<ol>元素创建的有序列表隐含地具有一个名为 list-item 的计数器，例如：

<ol><li>第一项</li><li>第二项</li><li>第三项</li>
</ol>

其效果如下：

第一项
第二项
第三项

可以看到，虽然我们没有为<ol>列表项编号，但是其显示出来的效果为我们实现了自动计数编号，随着列表项递增，序号递增。

1.2 CSS计数器样式

CSS 计数器引入了@counter-style规则，它允许开发者自定义计数器的样式，以便与 CSS 列表标记和生成内容计数器一起使用，即在list-style-type属性或counter()和counters()函数中使用这些样式。计数器样式定义了如何将计数器值转换为字符串。计数器样式（Counter styles）由名字、算法、负号、前缀、后缀、范围、口语形式、后备样式组成。

例如：

<ul class="at"><li>第一项</li><li>第二项</li><li>第三项</li>
</ul><style>
ul.at {list-style: at;
}@counter-style at {system: cyclic;symbols: '@';suffix: " ";
}
</style>

其效果如下：

2. 使用计数器详解

2.1 再探`@counter-style`规则

在 1.2 CSS计数器样式的例子中，已经初步展示过 @counter-style 的用法，改规则的作用是定义自定义计数器样式，其语法结构为：

@counter-style <counter-style-name> { <declaration-list> }

其中：

<counter-style-name> 用于标识该计数器样式的名称，我们在定义好样式后，就是通过该名称来这个样式的。

< counter-style-name >可以是CSS关键字decimal、disc、square、circle、disclosure-open和disclosure-closed等等，实际上这些关键字是系统预定义好了的样式，你也可以自己通过@counter-style

关键字	描述
`decimal`	表示十进制阿拉伯数字。
`disc`	表示实心圆。
`square`	表示实心正方形。
`circle`	表示空心圆。
`disclosure-open` 和 `disclosure-closed`	表示适用于指示`打开`或`关闭`的公开小部件的符号。

2.1.1 计算器样式名关键字

（1） `disc`

表示实心圆，类似于 • U+2022 BULLET。该预定义样式的规范定义为：

@counter-style disc {system: cyclic;symbols: \2022;/* • */suffix: " ";
}

例如：

<ul class="disc"><li>disc</li></ul>

其效果如下：

disc

（2） `circle`

表示实心圆，类似于 • U+2022 BULLET。该预定义样式的规范定义为：

@counter-style circle {system: cyclic;symbols: \25E6;/* ◦ */suffix: " ";
}

例如：

<ul class="circle"><li>circle</li></ul>

其效果如下：

circle

（3） `square`

表示实心正方形，类似于 ▪ U+25AA BLACK SMALL SQUARE。该预定义样式的规范定义为：

@counter-style square {system: cyclic;symbols: \25AA;/* ▪ */suffix: " ";
}

例如：

<ul class="square"><li>square</li></ul>

其效果如下：

square

（4） `decimal`

表示十进制阿拉伯数字(例如，1，2，3，…, 98, 99, 100)。该预定义样式的规范定义为：

@counter-style decimal {system: numeric;symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
}

例如：

<ol class="decimal"><li>decimal</li><li>decimal</li><li>decimal</li><li>...</li>
</ol>

其效果如下：

decimal
decimal
decimal
...

（5） `decimal-leading-zero`

用起始零填充的十进制数 (e.g., 01, 02, 03, …, 98, 99, 100).

@counter-style decimal-leading-zero {system: extends decimal;pad: 2 '0';
}

例如：

<ol class="decimal-leading-zero"><li>decimal-leading-zero</li><li>decimal-leading-zero</li><li>decimal-leading-zero</li><li>...</li>
</ol><style>
ol.decimal-leading-zero { list-style: decimal-leading-zero}
</style>

其效果如下：

（6） `trad-chinese-informal`

繁体中文非正式编号 (e.g., 一千一百一十一)。

例如：

<ol class="trad-chinese-informal"><li>trad-chinese-informal</li><li>trad-chinese-informal</li><li>trad-chinese-informal</li><li>...</li>
</ol><style>
ol.trad-chinese-informal { list-style: trad-chinese-informal;}
</style>

其效果如下：

（7） `lower-roman`

小写ASCII罗马数字 (e.g., i, ii, iii, …, xcviii, xcix, c)，该值值预定义样式的规范定义为：

@counter-style lower-roman {system: additive;range: 1 3999;additive-symbols: 1000 m, 900 cm, 500 d, 400 cd, 100 c, 90 xc, 50 l, 40 xl, 10 x, 9 ix, 5 v, 4 iv, 1 i;
}

（8） `upper-roman`

大写ASCII罗马数字 (e.g., I, II, III, …, XCVIII, XCIX, C)，该值值预定义样式的规范定义为：

@counter-style upper-roman {system: additive;range: 1 3999;additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
}

（9） `lower-greek`

小写古典希腊语 (e.g., α, β, γ, …, ω, αα, αβ)，该值值预定义样式的规范定义为：

@counter-style lower-greek {system: alphabetic;symbols: "\3B1" "\3B2" "\3B3" "\3B4" "\3B5" "\3B6" "\3B7" "\3B8" "\3B9" "\3BA" "\3BB" "\3BC" "\3BD" "\3BE" "\3BF" "\3C0" "\3C1" "\3C3" "\3C4" "\3C5" "\3C6" "\3C7" "\3C8" "\3C9";/* α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω */
}

（10） `upper-latin`

大写ASCII字母 (e.g., A, B, C, …, Z, AA, AB)，该值值预定义样式的规范定义为：

@counter-style upper-latin {system: extends upper-alpha;
}

（11） `disclosure-open` 和 `disclosure-closed`

表示适用于指示 打开 或 关闭 的公开小部件的符号，如HTML <details>元素。这两个值预定义样式的规范定义为：

@counter-style disclosure-open {system: cyclic;suffix: " ";/* for symbols, see normative text below */
}

@counter-style disclosure-closed {system: cyclic;suffix: " ";/* for symbols, see normative text below */
}

例如：

<ul class="disclosure-open"><li>disclosure-open</li></ul>
<ul class="disclosure-closed"><li>disclosure-closed</li></ul><style>
ul.disclosure-open { list-style: disclosure-open}
ul.disclosure-closed { list-style: disclosure-closed}
</style>

其效果如下：

2.1.2 更多关键字

2.2 `@counter-style`中的可用属性

CSSCounterStyleRule接口中定义了一个 @counter-style 规则的关键字。

`name`

`system`

指定一个算法，用于将计数器的整数值转化为字符串表示。

`symbols`

定义一个符号，用于标记的表示。符号可以包含字符串，图片或自定义的识别码。这个符号怎样构建标记呢？这依赖于system描述符里面所定义的算法。举个例子，如果system的值是fixed,那么symbols属性指定的固定的N个符号，将被用来表示计数器的前N个值。用完了前N个符号后，列表里剩下的值将使用fallback定义的样式来表示。

`additiveSymbols`

additive-symbols 描述符定义符号，用于值可累积的可数的 system 的项。 additive-symbols定义累积的的元组（tuples）,每个元组项都包含一个符号和一个非负整数的权重。additive system被用于构造sign-value numbering （符号-值，指数字的值就是是符号加在一起的值）系统，比如罗马数字。

`negative`

指定一个符号，加在标记表示符的前面。前缀在最后阶段才会被加上，所以在计数器的最终表示中，它在negative前。

`prefix`

指定一个符号，加在标记表示符的前面。前缀在最后阶段才会被加上，所以在计数器的最终表示中，它在negative前。

`suffix`

与prefix类似，suffix指定一个符号，加在标记表示符的后面。

`range`

指定一个counter-style生效的范围，如果计数器的值不再这个范围内，那么自定义的counter-style不会生效，counter-style 会后退到 fallback 的style。

`pad`

在你想要给标记表示符最小值时使用。比如说，你想要计数器从01开始，经过02，03，04，那么这时可以使用pad了。对于大于pad指定值的表示符，标记会恢复为normal。

`speakAs`

当已明确定义 @counter-style 后，可以用 speak-as 定义在口语场景中如何表述这个 counter 符号。比如作为一篇文章的作者可以指定，当计算机读出这篇文章时，是以数字序号表示 counter，还是仅仅用语音提示。

`fallback`

定义一个备用的系统，当自定义的系统不能使用或者计数器的值超过了定义的范围时使用。如果备用系统也不能表示计数器的值，那么备用系统的备用系统（如果有的话）将会启用。如果没有指定备用系统，或者备用系统链不能够正确表示一个值，那么最终会降为十进制样式表示。

2.3 操作计数器的相关属性

CSS 计数器使用到以下几个属性：

属性	描述
`counter-reset`
`counter-increment`
`content`
`counter()`
`counters()`

2.3.1 `counter-reset`

2.3.2 `counter-increment`

2.3.3 `content`

2.2.4 `counter()`

2.2.5 `counters()`

【正在完善】CSS 计数器相关推荐

html5计数器,CSS 计数器(counter)
带计数器的自动编号 CSS计数器就像"变量".变量值可以通过CSS规则递增(它将跟踪它们被使用的次数).要使用CSS计数器,我们将使用以下属性: counter-reset - 创 ...
CSS计数器(序列数字字符自动递增)详解———张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=4303 一.挖坟不可 ...
css样式计数器,详细介绍CSS计数器
css计数器效果是指使用CSS代码实现随元素的数目增多, 数值也跟着变大的效果, 有点类似于 , 但是比ol更灵活. (推荐教程:css视频教程) CSS计数器有两个属性 (counter-reset ...
css的content属性，以及如何通过css content属性实现css计数器？
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>cs ...
html计数器自动编号,如何使用CSS计数器自动为元素进行编排
原标题:如何使用CSS计数器自动为元素进行编排 CSS计数器用于向元素添加计数.通过提供可以初始化(使用)的变量来添加计数counter-reset,然后可以通过CSS规则增加这些变量.许多开发人员忽 ...
html 计数器样式,HTML+CSS入门 10分钟掌握CSS计数器
CSS计数器是"啊太好了,竟不知道CSS可以做这啊"这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器我们从这个简单的分页 ...
html计数器自动编号,css如何使用计数器给元素自动编号？css计数器的使用（代码示例）...
css如何使用计数器给元素自动编号?本篇文章就给大家介绍设置和使用css计数器的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在之前的文章[css计数器(counter)是什 ...
CSS计数器（自定义列表）
概念 CSS3计数器(CSS Counters)可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能(自定义有序列表) 与有序列表相比,它的突出特性在于可以对任意元素计数,同时实 ...
深入理解CSS计数器
前面的话我们对计数器已经不陌生了,有序列表中的列表项标志就是计数器. 创建计数器创建计数器的基础包括两个方面,一是能重置计数器的起点,二是能将其递增一定的量. counter-reset coun ...

【正在完善】CSS 计数器

李俊才 的 CSDN 博客

邮箱 ：291148484@163.com

CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343

本文地址：https://blog.csdn.net/qq_28550263/article/details/123934458

1. CSS 计数器简介

1.1 什么是CSS计数器

1.2 CSS计数器样式

2. 使用计数器详解

2.1 再探@counter-style规则

2.1.1 计算器样式名关键字

（1） disc

（2） circle

（3） square

（4） decimal

（5） decimal-leading-zero

（6） trad-chinese-informal

（7） lower-roman

（8） upper-roman

（9） lower-greek

（10） upper-latin

（11） disclosure-open 和 disclosure-closed

2.1.2 更多关键字

2.2 @counter-style中的可用属性

name

system

symbols

additiveSymbols

negative

prefix

suffix

range

pad

speakAs

fallback

2.3 操作计数器的相关属性

2.3.1 counter-reset

2.3.2 counter-increment

2.3.3 content

2.2.4 counter()

2.2.5 counters()

【正在完善】CSS 计数器相关推荐

最新文章

热门文章

李俊才的 CSDN 博客

邮箱：291148484@163.com

2.1 再探`@counter-style`规则

（1） `disc`

（2） `circle`

（3） `square`

（4） `decimal`

（5） `decimal-leading-zero`

（6） `trad-chinese-informal`

（7） `lower-roman`

（8） `upper-roman`

（9） `lower-greek`

（10） `upper-latin`

（11） `disclosure-open` 和 `disclosure-closed`

2.2 `@counter-style`中的可用属性

`name`

`system`

`symbols`

`additiveSymbols`

`negative`

`prefix`

`suffix`

`range`

`pad`

`speakAs`

`fallback`

2.3.1 `counter-reset`

2.3.2 `counter-increment`

2.3.3 `content`

2.2.4 `counter()`

2.2.5 `counters()`