UD5工具箱
CSS 计数器的工作流程分为三个步骤：重置、递增、输出。
1. 重置计数器：在列表的父容器（或任意祖先元素）上使用 counter-reset: myCounter; 创建一个名为 myCounter 的计数器实例，初始值默认为 0。这一步相当于声明一个变量并赋初值。
2. 递增计数器：在每个列表项（如 <li>）上使用 counter-increment: myCounter;，浏览器会在渲染该元素时将 myCounter 的值加 1。如果需要自定义步长，可以写成 counter-increment: myCounter 2; 表示每次加 2。
3. 输出计数器：在 ::before 或 ::after 伪元素的 content 属性中使用 counter(myCounter) 将当前计数值插入到页面中。也可以使用 counters(myCounter, ".") 输出嵌套计数器的拼接值。
浏览器在渲染时会按照 DOM 顺序依次处理每个列表项，先递增再输出，因此最终显示的编号是从 counter-reset 的初始值开始的连续整数序列。如果某个元素同时声明了 counter-reset 和 counter-increment，浏览器会先处理重置再处理递增。
list-style-type 和 counter-increment 虽然都能为列表生成编号，但它们的实现机制和能力有本质区别：
作用范围：list-style-type 仅作用于单个 <ol> 或 <ul> 元素，编号仅在该列表内部连续。嵌套的 <ol> 会各自独立编号（通常都从 1 开始）。而 counter-increment 配合 counter-reset 可以跨元素共享计数器作用域，实现跨列表的连续编号。
自定义能力：list-style-type 只能使用浏览器预定义的样式值（如 decimal、upper-alpha），无法自定义标记的外观（颜色、字号等需通过 ::marker 间接设置）。而 CSS 计数器方案可以通过 ::before 伪元素完全控制标记的 HTML 结构和 CSS 样式，包括背景色、边框、渐变等复杂效果。
嵌套行为：嵌套列表中，list-style-type 无法实现多级编号拼接（如 "1.1"、"1.2"），而 counters() 函数可以自动将所有嵌套层级的编号用分隔符拼接。
浏览器兼容性：list-style-type 在所有浏览器中都有良好支持，包括 IE。CSS 计数器在 IE8+ 中可用，但 ::marker 伪元素在 IE 中不支持，需要使用 ::before 替代。
有两种方式可以实现有序列表从指定数字开始：
方式一：使用 HTML 属性。在 <ol> 标签上添加 start 属性，如 <ol start="5">，列表会从数字 5 开始编号。这是最简单的方式，但只能设置起始值，无法自定义编号样式。
方式二：使用 CSS 计数器。在父容器上声明 counter-reset: myCounter 4;（初始值设为目标起始值减 1），然后在列表项上使用 counter-increment: myCounter;。这样第一个列表项的编号就是 5。这种方式的优势在于可以同时自定义编号的颜色、字号、背景等视觉样式。
在本工具中，"起始编号"参数对应的就是 CSS 计数器方案。工具会自动将你设置的值作为 counter-reset 的初始值，并在生成的 CSS 代码中体现。例如，将起始编号设为 3，生成的代码会包含 counter-reset: counterName 2;，使第一个列表项显示为 3。
需要注意的是，如果列表被分页或分布在不同容器中，使用 start 属性无法实现跨页面连续编号，此时必须使用 CSS 计数器方案。
::marker 伪元素仅支持一个有限的 CSS 属性子集。根据规范和浏览器实现，目前支持的属性包括：
完全支持的属性：color（标记颜色）、font（字体简写）、font-family、font-size、font-style、font-weight、font-variant、line-height、content（仅限自定义标记）。
部分浏览器支持的属性：text-combine-upright、text-decoration、text-emphasis、text-transform。
不支持的属性：background（背景色）、padding（内边距）、border（边框）、margin（外边距）、width / height（尺寸）、display（显示类型）。
这意味着如果你想为列表标记添加背景色、边框或圆角等效果，::marker 无法满足需求。此时需要使用 ::before 伪元素替代，在 content 属性中手动插入编号文本或自定义内容。::before 支持所有 CSS 属性，自定义能力远强于 ::marker。
本工具在"标准样式"模式下使用 ::marker 实现，在"创意样式"模式下自动切换为 ::before 伪元素，以支持背景色、边框、圆角等高级样式。
@counter-style 是 CSS Counters Level 3 规范中引入的 at-rule，允许开发者定义全新的计数器标记样式，而不仅限于浏览器预定义的 decimal、upper-alpha 等值。通过 @counter-style，你可以指定：
- symbols：标记使用的符号系统，可以是字符串、数字、特殊字符等
- suffix：每个编号后面追加的后缀（如 ". "）
- prefix：每个编号前面追加的前缀
- range：该样式适用的编号范围
- pad：编号的填充方式（如补零）
- fallback：超出范围或不支持时的回退样式
- speak-as：屏幕阅读器朗读时的替代文本
浏览器支持现状（截至 2025 年）：Firefox 从版本 33 开始提供实验性支持，但需要通过 about:config 启用标志位。Chrome 和 Safari 尚未实现 @counter-style，在实际项目中无法使用。因此，该特性目前仍处于"规范定义但尚未广泛落地"的阶段。
生产环境建议：由于浏览器兼容性不足，不建议在生产代码中直接使用 @counter-style。如果需要自定义计数器样式，推荐使用 ::before 伪元素 + content: counter() 的方案，本工具生成的代码即采用此方式，兼容性更好。
CSS 计数器通过作用域（scope）机制实现嵌套列表的独立计数。具体原理如下：
当 counter-reset 声明在父级 <ol> 元素上时，会在该元素上创建一个计数器实例。子列表中的 counter-increment 会创建该计数器的新实例（而非直接修改父级实例），子列表结束时该实例自动销毁。这确保了每个嵌套层级的计数器互不干扰。
示例：外层 <ol> 声明 counter-reset: section;，内层 <ol> 也声明 counter-reset: section;。当外层列表项递增 counter-increment: section 时，编号为 1、2、3。当进入内层列表时，由于内层的 counter-reset 创建了新实例，编号从 1 重新开始。内层列表结束后，外层列表继续使用原来的编号值。
使用 counters() 函数：如果希望显示多级编号（如 "1.1"、"1.2"），可以使用 content: counters(section, ".")。该函数会遍历所有同名计数器实例，从最外层到最内层依次拼接，用指定分隔符连接。这样即使内层编号从 1 重新开始，最终显示的完整编号仍然是正确的层级路径。
本工具的嵌套列表演示区域正是基于这一原理构建的，你可以通过修改起始编号和样式来验证不同配置下的计数行为。
在移动设备上优化计数器样式，需要考虑屏幕宽度、触控交互和可读性三个维度：
1. 缩小标记字号。桌面端常用的 18px-20px 标记字号在 320px 宽的手机屏幕上会显得过大，建议通过 @media 查询将字号降至 14px-16px：
@media (max-width: 576px) {
.custom-list li::before {
font-size: 14px;
}
}2. 减少标记与文本间距。在小屏幕上，标记与列表文本之间的间距应适当缩小，避免浪费横向空间。可以使用负的 margin-right 或缩短 padding 值来实现。
3. 简化创意样式。创意样式中的渐变、浮雕、阴影等效果在小屏幕上可能因像素密度不足而显得模糊。建议在移动端回退到纯色标记或简单的背景色方案，确保标记清晰可辨。
4. 考虑深色模式。移动端用户可能启用了系统级深色模式。在设计计数器样式时，使用 CSS 媒体查询 @media (prefers-color-scheme: dark) 为深色背景设置对比度足够的标记颜色。
5. 避免固定宽度。不要为计数器标记设置固定宽度（如 width: 30px），因为在不同屏幕尺寸和字体渲染设置下，标记的实际宽度可能不同。使用 min-width 配合 text-align: center 是更灵活的方案。
本工具的自定义参数支持在移动端使用，你可以在手机浏览器中打开工具，直接调整参数并预览响应式效果。