使用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()函数旨在在打印输出时为所有更高级别计数器（父级）的值加上前缀。
热门推荐
10 小红书平安祝福语简短
11 生日祝福语大全女孩简短
12 收生日红包祝福语 简短
13 领证幽默祝福语简短
14 法考面试祝福语简短
15 老哥出门祝福语简短语
16 送灯祝福语简短独特
17 幼儿狗年祝福语大全简短
18 好听的元旦简短祝福语