使用CSS计数器实现多级编号
示例
的CSS
ul {
list-style: none;
counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
counter-increment: list-item-number;
}
li:before {
content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}的HTML
<ul>
<li>Level 1
<ul>
<li>Level 1.1
<ul>
<li>Level 1.1.1</li>
</ul>
</li>
</ul>
</li>
<li>Level 2
<ul>
<li>Level 2.1
<ul>
<li>Level 2.1.1</li>
<li>Level 2.1.2</li>
</ul>
</li>
</ul>
</li>
<li>Level 3</li>
</ul>上面是使用CSS计数器进行多级编号的示例。它利用了计数器的自我嵌套概念。自嵌套是一种概念，其中，如果元素已经具有使用给定名称的计数器，但是必须创建另一个，则它将其创建为现有计数器的子代。在这里，第二级ul已经list-item-number从其父级继承了计数器，但是随后必须创建自己的list-item-number（针对其子级li），因此创建list-item-number[1]（第二级计数器）并将其嵌套在list-item-number[0]（第一级计数器）之下。因此，它实现了多级编号。
使用counters()函数而不是函数来打印输出，counter()因为该counters()函数旨在在打印输出时为所有更高级别计数器（父级）的值加上前缀。