details标签需配合CSS计数器实现序号显示：为details设counter-increment，summary:before用counter()插入序号，注意display、避免display:none，支持格式化与嵌套作用域管理。
details标签默认不支持CSS计数器自动递增
因为 <details> 不是常规的列表容器，counter-increment 不会自动作用于它——即使你给每个 <details> 设置 counter-increment: section，也得手动触发显示，且 <summary> 的内容不会自动插入计数器值。
用 :before 伪元素 + counter() 显示序号
核心是把计数逻辑绑定到 <details> 元素本身，再通过 <summary> 的 :before 插入序号。注意两点：一是必须给 <details> 设 counter-increment；二是 <summary> 必须设 display: list-item 或配合 content 才能生效（但更稳妥的是直接操作 <summary>:before）。
实操建议：
- 在 CSS 中定义计数器：
body { counter-reset: details-counter; } - 为每个
<details>增量：details { counter-increment: details-counter; } - 在
<summary>:before中显示：details > summary:before { content: counter(details-counter) ". "; } - 避免
<summary>内容被换行顶开：加summary { display: flex; align-items: center; }并确保:before有margin-right
展开/折叠状态影响序号布局？不会，但要注意 visibility 和 display
<details> 的 open 属性只控制 <summary> 后的内容显隐，不影响 <details> 元素本身的文档流和计数器行为。所以序号始终连续、稳定。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
容易踩的坑：
- 如果对
<details>设置display: none，计数器会跳过它；用visibility: hidden或height: 0; overflow: hidden更安全 - 动态添加
<details>时，浏览器会自动重算计数器，无需 JS 干预 - 不要在
<summary>内写纯文本序号（如<summary>1. 标题</summary>），否则和 CSS 计数器冲突且无法维护
想加前缀或格式化数字？用 counter() 的第二个参数
counter() 支持类型参数，比如罗马数字、字母、带括号等。例如：
details > summary:before {
content: counter(details-counter, upper-alpha) ". ";
}
常见可选值：decimal（默认）、lower-roman、upper-latin、decimal-leading-zero。注意：IE 完全不支持 <details>，所有计数器方案在 IE 下无效；Safari 15.4+、Chrome 12+、Firefox 90+ 均支持良好。
复杂点在于嵌套结构——如果你把 <details> 套在另一个计数器容器里（比如 <section>），需要手动管理作用域，用 counter-reset: subsection 配合 counter(details-counter) "." counter(subsection)，否则容易串号。
