1. 快速定制无序列表样式的核心原则
1.1 了解浏览器对列表项的渲染机制
在进行 HTML 无序列表定制样式 时，首先要理解默认的渲染规则：list-style、margin、padding 会影响列表的可视外观。通过将 list-style 设置为 none，可以移除浏览器默认的圆点或数字，从而获得对自定义样式的完全控制。
要确保可访问性，移除默认样式时需要用工具来确保屏幕阅读器仍能正确解释项。你可以为每个 li 提供清晰的文本和对比度。
/* 统一清理默认样式 */
ul.custom-list { list-style: none; margin: 0; padding: 0; }1.2 使用 CSS 变量实现主题化
通过 CSS 变量，可以在不同主题间快速切换无序列表示式样式，例如颜色、间距、对齐等，保持一致性并提高可维护性。把常用的颜色和间距抽取为变量，可以让你在不同页面快速应用。
示例中，定义主题变量后再应用到列表的定位和图标颜色。
:root {--bullet-color: #333;--gap: 1.2em;
}
ul.custom-list li {position: relative;padding-left: var(--gap);
}
ul.custom-list li::before {content: "•";position: absolute;left: 0;color: var(--bullet-color);
}1.3 结合 ARIA 与无障碍考虑
即使使用自定义 Bullet，也要确保键盘导航和屏幕阅读器工作正常。对列表容器添加合适的角色，以及对列表项的文本结构进行语义化处理，是提升可访问性的重要步骤。
下面的示例展示了一个简单的可访问自定义列表实现思路。
ul.custom-list {list-style: none;padding: 0;
}
ul.custom-list li {padding-left: 1.5em;
}
ul.custom-list li:focus { outline: 2px solid #4a90e2; }2. 三种常见实现方式对比
2.1 使用 ::marker 自定义 Bullet（现代浏览器）
CSS ::marker 是用于修改无序列表标记的最直接方式，适合简单的圆点、数字等。通过搭配列表重置，可以实现统一的外观。
注意：并非所有旧浏览器支持 ::marker，若需要兼容，请使用伪元素方案。
ul.marker-list {list-style: none;
}
ul.marker-list li {list-style: disc; /* 如果需要保留原有标记可移除这个设置 */
}
ul.marker-list li::marker {color: #e44;font-size: 0.95em;
}2.2 使用伪元素 ::before 实现自定义图标
伪元素是实现自定义 bullets 的通用技巧，适用于需要自定颜色、大小甚至复杂图形的场景。
通过为每个 li 添加一个前置伪元素，可以实现任意形状的标记。
ul.custom-list {list-style: none;padding: 0;
}
ul.custom-list li {position: relative;padding-left: 1.8em;
}
ul.custom-list li::before {content: "";position: absolute;left: 0;top: 0.6em;width: 0.8em;height: 0.8em;border-radius: 50%;background: #2a90f5;
}2.3 使用 SVG 作为背景图片或标记
SVG 提供无限定制的形状与渐变，可以确保在高分辨率下的清晰度，同时对缩放友好。
将 SVG 作为内联背景图，或者直接在 <code>::before</code> 中嵌入 SVG，可以实现复杂图形。
ul.svg-list {list-style: none;padding: 0;
}
ul.svg-list li {padding-left: 1.5em;position: relative;
}
ul.svg-list li::before {content: "";position: absolute;left: 0;top: 0;width: 1em;height: 1em;background-image: url('data:image/svg+xml;utf8,');background-size: contain;background-repeat: no-repeat;
}3. 快速上手的实战技巧
3.1 采用 CSS 变量进行主题化
如前所述，变量化可以快速实现不同风格的列表。通过将颜色、间距、图标形状抽象成变量，页面切换就像打开一个主题风格。
结合函数和 calc 能在不同分辨率下保持一致的对齐。
:root {--bullet-color: #333;--gap: 1.4em;
}
@media (prefers-color-scheme: dark) {:root { --bullet-color: #ddd; }
}3.2 使用媒体查询实现响应式变化
在不同屏幕尺寸下，调整列表标记的可视位置和间距，确保可读性与美观。
示例中，我们通过 media queries 修改间距和字体大小，实现自适应布局。
@media (max-width: 720px) {:root { --gap: 1.0em; }ul.custom-list li { padding-left: var(--gap); }
}3.3 无障碍与可读性要点
对于自定义标记，保持良好的对比度、可聚焦性和文本顺序是必要的无障碍要点。
建议在 focus 时提供可视化轮廓指示，并确保与屏幕阅读器协同工作。
在设计与实现中，温度参数的概念也可用于自动化模板的风格稳定性，例如将 temperature=0.6 映射到较稳定的主题设计，提升快速生成时的可控性与一致性。
4. 兼容性与性能考量
4.1 浏览器差异与回退
旧版浏览器可能不支持 ::marker，或对伪元素渲染有差异。因此在关键场景应提供回退方案。
使用渐进增强原则，先做简单无伪元素实现，再逐步加入高级特性。
/* 回退方案示例：先用简单文本点作为标记 */
ul.list { list-style: disc; }4.2 性能影响评估
大量列表、复杂的伪元素可能对渲染造成压力。通过仅在必要的场景应用伪元素、减少重绘，可以提升页面性能。
在性能敏感的页面，优先选择简单的标记方案，确保滚动和交互的流畅。
/* 避免大量复杂伪元素的场景示例 */4.3 调试与工具
使用浏览器开发者工具检查布局、尺寸和伪元素样式，确保标记的对齐与间距正确。
另外，可以使用工具如 CSS 变量调试插件、样式表对比工具，快速定位问题。
