这是有关于列表造型设计相关的话题，简单地说，就是CSS给列表项设计样式造型。可能你会觉得这样的话题有什么好聊的，不就是用list-style 相关的属性给 li 列表项或者display为list-item的元素设置样式吗？说实话，一直以来我就是这么认为的，但自从看到 @counter-style 给列表项自定义表情符的标记时，让我感到好奇。随着继续往下探究，发现这里面有很多很有意思的东西，所以我觉得在 图解CSS系列 中单独用一篇文章和大家来聊 CSS计数器的奇妙世界。感兴趣的同学请继续往下阅读。

先从列表说起

在 HTML 中有两个列表元素，分别是 无序列表的 <ul> 和 有序列列表的 <ol>，它们都有 子元素 <li>，它被称为列表项。无序列表<ul>和有序列表<ol>最大的区别是：

• 无序列表<ul> ：代表一个项目的列表，其中列表项目的顺序并不重要，即，改变列表项目顺序不具有实质性的意义，也不会改变文档的语义
• 有序列表<ol> ：代表一个项目的列表，其中列表项目被有意地排序，这样一来，改变顺序会改变文档的语义

比如：

<div class="wrapper">
    <p>I have lived in the following countries:</p>
    <ul>
        <li>Switzerland</li>
        <li>Norway</li>
        <li>United Kingdom</li>
        <li>United States</li>
    </ul>
</div>
<div class="wrapper">
    <p>I have lived in the following countries (given in the order of when I first lived there):</p>
    <ol>
        <li>Switzerland</li>
        <li>United Kingdom</li>
        <li>United States</li>
        <li>Norway</li>
    </ol>
</div>

在 HTML 中除了语义化之外，<ol> 和 <ul> 相比，在<ol> 上有两 <ul> 没有的属性，即reversed和start，可以用来<ol>倒排和设置起始序列号：

<ol>
    <li>Switzerland</li>
    <li>United Kingdom</li>
    <li>United States</li>
    <li>Norway</li>
</ol>

<ol reversed>
    <li>Switzerland</li>
    <li>United Kingdom</li>
    <li>United States</li>
    <li>Norway</li>
</ol>

<ol start="5">
    <li>Switzerland</li>
    <li>United Kingdom</li>
    <li>United States</li>
    <li>Norway</li>
</ol>

<ol start="5" reversed>
    <li>Switzerland</li>
    <li>United Kingdom</li>
    <li>United States</li>
    <li>Norway</li>
</ol>

尽管我们在 HTML 中经常使用列表（<ul> 或 <ol>），但有很多 Web 开发者不会太多关注它们。其实，在 Web 中有很多东西可以很有逻辑地被标记为一个列表。比如我们在构建分步器或时间轴或排序元素可以自然地使用 <ol> 标记，但设计中的许多东西可以用无序列表<ul>来描述，比如导航菜单。

正如前面示所示，如果我们不用 CSS 对其做任何处理的话，一般情况下，客户端对列表会有一些初始样式的设置。比如，ol和ul都有一个list-style-type的属性：

• ul 的 list-style-type 的值是 disc
• ol 的 list-style-type 的值是 decimal

他们的子元素 li 的 display 为会list-item。这就创建了一个块级的盒子，并有一个额外的标记框（Marker Box），标记框是用来放置标记符号（ul）或 数字（ol）的地方：

也就是说：

一个具有 display: list-item 的元素为该元素的内容生成一个块盒（Block Box），并且根据 list-style-type 和 list-style-image 的值，还可能生成一个标记框（Marker Box），作为该元素是一个列表项的视觉指示。

我们使用 CSS 可以在这两个框中设置相应的CSS，也可以做很有意思的东西，从而设计各种样式网格的列表项。但这些都是后话，也是我们后面要和大家一起探讨的主要内容。

CSS 计数器的历史

在 CSS1 中就引入了列表项，并且该规范定义了十进制（deci）、小罗马（lower-roman）、大罗马（upper-roman）、小阿尔法（upper-alpha） 和 大阿尔法（upper-alpha）等计数器列表样式类型（list-style-type）。

大约在 1998 年 3 月，也就是在 CSS2 中，基本列表部分已经被移到了12生成内容、自动编号和列表（12 Generated content, automatic numbering, and lists）中。该文档定义了用户代理在渲染非来自文档的内容时的行为。

根据 CSS2.1，内容可以由 content 与 ::before 和 ::after 伪元素一起使用时生成，或者display属性值为list-item的元素生成。

大多数情况下，我们content属性的值是字符串，但你也可以使用一个 <counter> 值，它可以由 counter() 或 counters() 函数指定。其他潜在的值包括引号和属性。

自动编号由 counter-increment 和 counter-reset 两个属性控制。由这两个属性定义的计数器将与上述content属性的counter()或counters()函数一起使用。

在 2003 年 5 月份，关于生成内容的整个部分被分割出来，独立放在 CSS生成内容模块（CSS Generated Content Module Level 3），但在这之前，CSS 列表已经有了自己的工作草案。

其实在这之前，大约是 2002 年 2 月份，W3C CSS工作小组发表过第一个有关于 CSS3 列表方面的模块，不过现在被称为 CSS 列表和计数器模块（CSS Lists and Counters Module Level 3）。

另外一个相关的规范是 CSS 计数器样式模块（CSS Counter Styles Level 3），在这个模块中引入了@counter-style 规则，允许我们定义自己自定义计数器样式，用于列表项标记框（list-marker）和生成内容的计算器中。它还包括了一个预定义计数器样式的列表。比如cjk-heavenly-stem和cjk-earthly-branch。

综合所述，这些都是用于定义列表项样式造型相关的规范文档。也就是说，到目前为止，用于列表样式设置的规范分布在：

• CSS Lists and Counters Module Level 3
• CSS Generated Content Module Level 3
• CSS Counter Styles Level 3
• Ready-made Counter Styles

不同模块包含的相关属性如下图所示：

可以点击这里查看全图！

列表标记样式

HTML 中的列表项（li），不管是有序列表还是无序列表的列表项，都有默认的标记符号，无序列表一般是实心黑圆点，有序列表一般是小写的阿拉伯数字：

但很多时候默认的标记符号无法满足我们设计的需求。在 CSS 中我们可以使用 list-style 给列表项调转标记符号样式。该属性有三个子属性：

list-style: <'list-style-position'> || <'list-style-image'> || <'list-style-type'>

• list-style-position ：设置标记符号位置，有点类似于 background-position，不过其只有outside 和 inside 两个值，其中 outside 是其默认值
• list-style-image ：设置标记符为图像，有点类似于 background-image，其默认值为none
• list-style-type ：设置标记符类型，其中有序列列表标记符号类型是 decimal，无序列表标记符号类型是 disc

先来看 list-style-type。

list-style-type

list-style-type 是用来指定列表标记类型，而且是字符串。list-style-type生效有两个条件：

• 列表项或display: list-item的元素的::marker 的 content 值为 normal
• 列表项或display: list-item的元素没有标记图像，即 list-style-image 为 none

满足这两个条件时，用于list-style-type的字符串会用来填充列表项的标记，相当于是 ::marker 的 content 的值。

list-style-type可以接受 <counter-style> 、<string> 或 none 值。我们平时看到的列表项标记符就是 <counter-style> 指定的列表项计数器的值。预置的 <counter-style> 其实有很多个，主要分为四大类型：

• 数字（Numeric）类型：默认用于有序列表标记符
• 字母（Alphabetic）类型：默认也用于有序列表标记符
• 符号（Symbolic）类型：默认用于无序列表标记符
• 固定（Fixed）类型：这个和中国历史有很深的联系，在中文里分为“天干地支”，其中天干是序数，和中国风水及占星术联系紧密；地支是排序，和中国十二生肖联系紧密

每一种类型都有不同的值。

表格中列出的是 <counter-style> 中预定义的字符串标记符，详细的可以在 CSS Counter Styles Level 3 规范中查阅，后面在介绍 @counter-style 时还会提到这部分内容！

具体来说，标记字符串是使用指定的 <counter-style> 生成列表项计数器值的结果，前面是 <counter-style> 的前缀（prefix），后面是 <counter-style> 的后缀（suffix）。如果指定的 <counter-style> 不存在，则假定为十进制，即 decimal:

不知道你是不是和我相似，原以为列表项标记符就只有那么十来种。

list-style-type 除了可以使用 <counter-style> 指定的字符串之外，还可以是其他的任意字符串，比如表情符号，文本字符，