CSS 计数器

/* 1. 在父元素上初始化计数器 */ .container { counter-reset: my-counter; /* 从 0 开始 */ counter-reset: my-counter 10; /* 从 10 开始 */ } /* 2. 在每个子元素上递增 */ .container li { counter-increment: my-counter; /* 加 1 */ counter-increment: my-counter 2; /* 加 2 */ } /* 3. 显示计数器值 */ .container li::before { content: counter(my-counter); /* 1, 2, 3 */ content: counter(my-counter, upper-roman); /* I, II, III */ content: counters(my-counter, "."); /* 1.1, 1.2（嵌套） */ }

counter(name) /* 1, 2, 3 */ counter(name, decimal) /* 1, 2, 3 */ counter(name, decimal-leading-zero) /* 01, 02, 03 */ counter(name, upper-roman) /* I, II, III */ counter(name, lower-roman) /* i, ii, iii */ counter(name, upper-alpha) /* A, B, C */ counter(name, lower-alpha) /* a, b, c */ counter(name, lower-greek) /* α, β, γ */

ol { counter-reset: section; list-style: none; } li { counter-increment: section; } li::before { content: counters(section, ".") " "; }