/* 定义序列号 */ body { counter-reset: section; /* 重置计数器 */ } /* 序列号使用 */ h1::before { counter-increment: section; /* 计数器加1 */ content: counter(section) ". "; /* 输出序列号 */ }
在上面的代码中,大家首先在body元素中定义了一个叫做section的计数器,并将其重置为0。然后,在h1元素的前面使用了伪元素before,并将section计数器加1。最后,使用content属性输出了序列号,并加上了一个点号。
上述代码的运行结果如下:
1. 标题1 2. 标题2 3. 标题3
大家还可以在元素中设置计数器的起始值,如下所示:
/* 定义序列号 */ body { counter-reset: section 3; /* 重置计数器,起始值为3 */ } /* 序列号使用 */ h1::before { counter-increment: section; /* 计数器加1 */ content: counter(section) ". "; /* 输出序列号 */ }
在上面的代码中,大家将section计数器的起始值设置为3。这样,在输出序列号时,就会从3开始计数。
总之,序列号提供了一种简单而有效的方式来实现网页中的列表、计数等功能,为前端开发带来了更多的可能性。