要使用 CSS 计数器，得先用 counter-reset 创建：
以下实例在页面创建一个计数器 (在 body 选择器中)，每个 <h2> 元素的计数值都会递增，并在每个 <h2> 元素前添加 "Section <
计数值
>:"
CSS 实例
body
{
counter-reset:
section
;
h2
:
:before
{
counter-increment:
section
;
content:
"
Section
"
counter
(
section
) ": "
;
尝试一下 »
嵌套计数器
以下实例在页面创建一个计数器，在每一个 <h1> 元素前添加计数值 "Section <
主标题计数值
>.", 嵌套的计数值则放在 <h2> 元素的前面，内容为 "<
主标题计数值
>.<
副标题计数值
>":
CSS 实例
body
{
counter-reset:
section
;
h1
{
counter-reset:
subsection
;
h1
:
:before
{
counter-increment:
section
;
content:
"
Section
"
counter
(
section
) ". "
;
h2
:
:before
{
counter-increment:
subsection
;
content:
counter
(
section
) "."
counter
(
subsection
) " "
;
尝试一下 »
计数器也可用于列表中，列表的子元素会自动创建。这里我们使用了
counters()
函数在不同的嵌套层级中插入字符串:
CSS 实例
ol
{
counter-reset:
section
;
list-style-type:
none
;
li
:
:before
{
counter-increment:
section
;
content:
counters
(
section
,".") " "
;
尝试一下 »
CSS 计数器属性
