AI 摘要：本文探讨了如何通过 CSS 实现多级嵌套列表的复杂编号样式（如法律文档中的 1. (a) (i) (A) 格式），并对比了传统选择器、CSS 嵌套和 @counter-style 的解决方案，同时强调了 HTML type 属性作为无 CSS 回退方案的重要性。

1. 问题背景
• 读者提问如何实现法律文档中常见的五级嵌套列表编号（如 1. (a) (i) (A) ）
• 示例场景：物业管理条例中的条款层级结构

2. 基础解决方案
• 传统选择器方法：通过 ol ol 层级选择器逐级设置 list-style-type （如 decimal 、lower-alpha ），但代码冗长且难以维护
• CSS 嵌套优化：利用 CSS 嵌套简化代码结构，使样式与 HTML 层级一一对应

3. 法律文档的特殊需求
• 括号 (a) 或 (i) 是法律格式的必需部分，需通过 @counter-style 自定义计数器样式：
• 扩展预定义样式（如 lower-alpha ），添加 prefix 和 suffix（如 (a) ）。
• 示例： enclosed-lower-alpha 样式将 a 包裹为 (a) 。

4. 无 CSS 兼容性方案
• 使用 HTML type 属性（如 type="a" ）确保旧浏览器或无 CSS 时仍显示正确编号。
• 法律文档中此功能至关重要，避免格式错误导致的法律歧义。

5. 相关资源扩展
• 文中推荐了 CSS-Tricks 关于 list-style 、 @counter-style 和计数器样式的其他文章，供深入学习。

CSS-Tricks

A Reader's Question on Nested Lists | CSS-Tricks

Answering a reader's question about how to create a complex numbering system with CSS list counters.