具体用法如下:
/* 语法 */
counter-reset: none | inherit | initial | <custom-ident> <integer>?;
/* 示例 */
body {
counter-reset: section; /* 初始化名为 "section" 的计数器,初始值为 0 */
}
h2::before {
counter-increment: section; /* 每次 h2 元素出现时,增加计数器值 */
content: "Section " counter(section) ": "; /* 在标题前显示计数器值 */
}
在这个例子中,counter-reset 用于初始化一个名为 "section" 的计数器,初始值为 0。然后,在每个 h2 元素前使用 counter-increment 增加该计数器的值。最后,通过 counter(section) 在伪元素 ::before 中引用计数器的值,并将其显示在标题前。
这样,每当新的 h2 元素出现时,"Section 1"、"Section 2" 等将会被添加到页面上。你可以根据需要自定义计数器的名称和初始值。
转载请注明出处:http://www.zyzy.cn/article/detail/6059/CSS