无需登录 数据私有 本地保存

CSS 计数器样式在线预览 - 自定义有序列表标记

开发工具 设计工具 CSS 列表样式 计数器 预览
59
0
0
0
术语定义与说明
counter-resetCSS 属性，用于在指定元素上创建一个新的计数器实例并将其值重置为 0（或指定的初始值）。语法为 counter-reset: name [initial-value];。一个元素可以同时重置多个计数器，用空格分隔名称即可。该属性通常声明在列表的父容器或章节标题的父级元素上。
counter-incrementCSS 属性，用于在每次匹配元素出现时将指定计数器的值递增 1（或指定的步长值）。语法为 counter-increment: name [step];。该属性通常声明在列表项 <li> 或章节标题元素上。如果步长值为负数，计数器会递减。
contentCSS 属性，用于在 ::before 或 ::after 伪元素中插入生成内容。与计数器配合时，可使用 content: counter(name) 插入当前计数值，或使用 content: counters(name, separator) 插入嵌套计数器的拼接值。该属性仅对伪元素生效，不能直接应用于常规元素。
::markerCSS 伪元素，匹配有序列表和无序列表项的标记符号（即编号或项目符号）。通过 ::marker 可以直接设置标记的颜色、字号、字体等样式，无需额外的 HTML 元素或伪元素。需要注意的是，::marker 仅支持有限的 CSS 属性子集（如 color、font-size、font-weight 等），不支持 background、padding、border 等属性。
@counter-styleCSS 规则（目前处于 Level 3 草案阶段），允许开发者自定义全新的计数器样式。通过 @counter-style 可以指定标记符号系统（symbols）、回退样式（fallback）、前缀和后缀（prefix / suffix）、范围（range）、填充（pad）等。截至目前，Firefox 已提供有限支持，Chrome 和 Safari 尚未完全实现。在生产环境中使用需谨慎，建议搭配回退样式。
counters() 函数CSS 函数，用于在 content 属性中引用嵌套计数器的所有实例值，并用指定的分隔符拼接。语法为 counters(name, separator, style)。例如 counters(section, ".") 会将嵌套层级的编号拼接为 "1"、"1.1"、"1.2"、"2"、"2.1" 等格式。与 counter() 函数不同，counters() 能同时访问所有同名计数器实例，适合多级编号场景。
list-style-typeCSS 属性，用于设置有序列表 <ol> 或无序列表 <ul> 的标记类型。可选值包括 decimal、lower-alpha、upper-roman、disc、circle、square 等。与 CSS 计数器不同，list-style-type 不能跨元素共享作用域，也不能在嵌套列表中实现自动重置。它更适合简单的单级列表场景。
计数器作用域（Scope）指计数器实例的可见范围。counter-reset 声明在哪个元素上，该计数器的作用域就限定在该元素的后代元素中。当嵌套列表的父级 <ol> 声明了 counter-reset，其子列表中的 counter-increment 会创建该计数器的新实例，子列表结束后实例自动销毁，编号不会泄漏到外层。
计数器继承（Inheritance）CSS 计数器不遵循常规的 CSS 继承机制。计数器值存储在元素的匿名盒子中，只能通过 counter-reset 和 counter-increment 修改。子元素无法"继承"父元素的计数器值，但可以通过 counter() 函数在 content 属性中读取祖先元素上创建的计数器当前值。
回退样式（Fallback）当 list-style-type 或 @counter-style 的指定值不被浏览器支持时，浏览器会尝试使用回退样式。在 @counter-style 规则中，fallback 属性指定了回退使用的内置样式名称。在 list-style-type 中，浏览器通常会回退到 decimal（阿拉伯数字）。
🔧 相关工具