使用content属性来插入项目编号

在content属性中使用counter属性值来针对多个项目追加连续编号,使用方法如下所示。

<元素>:before{
  content:counter(计数器名);
}

使用计数器来计算编号,计数器可任意命名。
另外,还需要在元素的样式中追加对元素的counter-increment属性的指定,为了使用连续编号,需要将counter-increment属性的属性值设定为before选择器或after选择器的counter属性值中所指定的计数器名。代码如下所示。

<元素>{
  counter-increment:before选择器或after选择器中指定的计数器名
}

对多个项目追加连续编号的示例

<h1>大标题</h1>
<p>示例文字。</p>
<h1>大标题</h1>
<p>示例文字。</p>
<h1>大标题</h1>
<p>示例文字。</p>
h1:before{content: counter(mycounter);}
h1{counter-increment:mycounter;}

在项目编号中追加文字

只要将before选择器中的代码修改为如下所示的代码就可以了。

h1:before{
content: '第'counter(mycounter)'章';
}

指定编号的样式

可以指定追加编号的样式,譬如对代码中追加的编号指定如下所示的样式,使得编号后面带一个“.”文字,编号颜色为蓝色,字体大小为42像素。

h1:before{
  content: counter(mycounter)'.';
  color:blue;
  font-size:42px;
}

指定编号的种类

用before选择器或after选择器的content属性,不仅可以追加数字编号,还可以追加字母编号或罗马数字编号。使用如下所示的方法指定编号种类。

content:counter(计数器名,编号种类)

可以使用list-style-type属性的值来指定编号的种类,list-style-type为指定列表编号时所用的属性。例如,指定大写字母编号时,使用“upper-alpha”属性,指定大写罗马字母时,使用“upper-roman”属性。

h1:before{
  content: counter(mycounter,upper-alpha)'.';
  color:blue;
  font-size:42px;
}

可以在大编号中嵌套中编号,在中编号中嵌套小编号。在该示例中,有两个大标题,每个大标题中又有三个中标题,使用编号嵌套的方式分别对大标题与中标题进行分层编号。

<h1>大标题</h1>
<h2>中标题</h2>
<h2>中标题</h2>
<h2>中标题</h2>
<h1>大标题</h1>
<h2>中标题</h2>
<h2>中标题</h2>
<h2>中标题</h2>
h1:before{
  content: counter(mycounter) '. ';
}
h1{
  counter-increment: mycounter;
}
h2:before{
  content: counter(subcounter) '. ';
}
h2{
  counter-increment: subcounter;
  margin-left: 40px;
}

在这个示例中,6个中标题的编号是连续的,如果要将第二个大标题里的中标题重新开始编号的话,需要在大标题中使用counter-reset属性将中编号进行重置

h1{
  counter-increment: mycounter;
  counter-reset: subcounter;
}

中编号中嵌入大编号

可以将大编号嵌入在中编号中,譬如要将代码清单中的中编号修改为“大编号-中编号”的形式,需要将中编号的before选择器中的代码修改成如下代码

h2:before{
  content:  counter(mycounter) '-' counter(subcounter) '. ';
}

<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
h1:before{
  content: counter(mycounter) '. ';
}
h1{
  counter-increment: mycounter;
  counter-reset: subcounter;
}
h2:before{
  content:  counter(mycounter) '-' counter(subcounter) '. ';
}
h2{
  counter-increment: subcounter;
  counter-reset: subsubcounter;
  margin-left: 40px;
}
h3:before{
  content:counter(mycounter) '-' counter(subcounter) '-' counter(subsubcounter)'. ';
}
h3{
  counter-increment: subsubcounter;
  margin-left: 40px;
}

在字符串两边添加嵌套文字符号

可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。
另外,在元素的样式中使用quotes属性来指定使用什么嵌套文字符号。
对于嵌套文字符号的添加功能,目前Firefox浏览器、Opera浏览器,Chrome浏览器与Safari浏览器均对其提供支持。
为添加嵌套文字符号的一个示例,在该示例中有一个h1标题元素,文字为“标题”,使用before选择器与after选择器在标题文字两边添加括号。

<h1>标题</h1>
h1:before{
  content: open-quote;
}
h1:after{
  content: close-quote;
}
h1{
  quotes:"(" ")";
}

当需要添加双引号时,需要使用“\”转义字符,使用方法如下所示。

h1{
  quotes:"\"" "\"";
}