UD5工具箱
第一步：选择计数器样式
打开工具页面后，在左侧"样式选择"面板中点击下拉菜单。菜单分为"标准样式"和"创意样式"两个分组。标准样式适用于正式文档、技术手册、学术论文等场景；创意样式适用于产品页面、营销落地页、个人博客等需要视觉吸引力的场景。点击任意样式名称后，右侧预览区域会立即更新为该样式的渲染效果。
第二步：调整自定义参数
在"样式选择"下方的"参数调节"区域，你可以修改以下六项参数：
- 起始编号：默认为 1。如果你的列表需要从特定数字开始（例如续接上一章节的编号），可将此值调整为目标数字。
- 标记颜色：点击颜色选择器可选择任意颜色。建议与页面背景保持足够对比度，确保可读性。
- 背景颜色：部分创意样式（如药丸标签、浮雕效果）会使用背景色。标准样式通常不需要背景色。
- 标记字号：控制编号文字的大小。过小会影响可读性，过大则会挤占列表正文空间。
- 字体粗细：从 100（极细）到 900（极粗）可调。默认 700 适合大多数场景。
- 边框圆角：控制创意样式中矩形标记的圆角程度。0 为直角，50% 为正圆。
第三步：观察嵌套列表效果
预览区域默认包含一个三层嵌套列表。展开或折叠任意层级，观察编号如何随嵌套深度变化。注意外层编号递增时，内层编号会自动重置为起始值。这是 CSS 计数器与 list-style-type 的核心区别——计数器通过 counter-reset 在父元素上创建新的计数作用域，而列表样式仅影响当前 <ol> 元素的标记。
如果你选择的是带有多级编号的样式（如 "1.1"、"1.2"），工具会使用 counters(counter-name, ".") 函数自动拼接父级编号。修改起始编号后，所有层级的编号都会相应偏移。
第四步：复制 CSS 代码
确认样式和参数满意后，点击预览区域下方的"复制代码"按钮。工具会将完整的 CSS 代码片段复制到系统剪贴板。代码包含：
- 计数器声明（
counter-reset和counter-increment） - 标记伪元素样式（
::marker或::before） - 你选择的所有自定义参数
- 嵌套计数器的
counters()函数调用（如适用）
将复制的代码粘贴到项目的样式表中，确保 HTML 结构与预览区域的嵌套列表一致即可生效。
第五步：在项目中集成
将代码集成到项目时，需要注意以下几点：
- 选择器匹配：确保 CSS 选择器能正确匹配目标列表元素。如果项目中使用了 BEM 或其他命名约定，可能需要调整类名。
- 作用域隔离：如果页面中有多个独立列表，每个列表需要独立的
counter-reset声明，避免计数器值互相干扰。 - 响应式适配：在移动端，标记字号可能需要适当缩小。建议使用
@media查询为小屏幕设备设置更紧凑的样式。 - 打印样式：如果页面需要支持打印输出，确保计数器样式在
@media print规则中也能正常显示。
常见问题排查
如果预览效果与预期不符，请检查以下事项：
- HTML 结构是否正确嵌套了
<ol>和<li>元素 counter-reset是否声明在列表的父容器上而非列表本身counter-increment是否应用在正确的元素上content属性是否正确引用了计数器名称- 浏览器是否支持
::marker伪元素（IE 不支持，需回退到::before）