CSS内容生成介绍

quotes

quotes定义嵌套引用类型，简单点说就是为内容添加引用符号，用什么符号完全自定义，它默认是有继承性的，属性值可以是none，inherit。

<style>
q {
  quotes: "\"" "\"" "(" ")";
}
</style>
<p><q>你好<q>我的</q>朋友</q></p>

结果：

你好我的朋友

在上面的嵌套引用中，"\"" "\""表示外部引用的符号，转义后的双引号，"(" ")"表示内部的嵌套内容的符号，这里用了括号。

content

content属性用于插入生成内容，必需结合::before和::after伪元素一起使用，表示在元素之前或之后插入生成内容，它是一个行内元素，默认属性值normal，可选值none, inherit。

我通常用它插入字体图标，其实它的功能远非如此，下面是我写的一个小例子：

只看前四个例子，例1插入了一段文本，比较简单。例2插入一对双引号，在这个例子中用到了quotes, open-quote, close-quote，这三个属性必须配合使用才能自定义引用符号，quotes用于定义插入的符号，open-quote, close-quote表示在内容的开始和结尾插入你定义符号。在例3中我插入一张图片，利用的是content的url方法。例4中利用了attr方法可以插入元素的属性值，比较少用。

counter-increment

该属性简单来说就是个计数器，其实它挺复杂的，必须配合content属性的counter()方法一起使用，在例5中有两行关键代码counter-increment: title表示为元素添加一个计数器，content: counter(title)'.'表示显示计数器，默认增量是1，从0开始递增。在例6中有这样一行代码content: counter(title, upper-alpha)，counter的第二个参数upper-alpha表示计数器的显示方式，和ul元素的list-style-type属性值相同。计数器是可以嵌套使用的，例7中使用了两个计数器，一个定义大标题计数器，一个定义子标题计数器。

counter-reset

该属性表示重置计数器。从上面的例7中可以看出，当我使用两个计数器时，每个计数器都是从1开始排序，但是我想要子标题的计数在每个父标题下都重新计数，这就需要使用counter-reset重置子标题的计数器，例8比例7多了一行关键代码counter-reset: subtitle，最终结果子标题的计数就重置了

结语

以上只是简单的对计数器的介绍，深入理解可以看张鑫旭老师的两篇文章：

小tip:CSS计数器+伪类实现数值动态计算与呈现

CSS counter计数器(content目录序号自动递增)详解