html的标签本身不支持自动编号，需用包裹实现计数，summary需设为flex并用::before生成编号，多组应分设counter-name，js仅作css失效时的备用方案。
details标签本身不支持自动编号
HTML 的 <details></details> 是语义化折叠组件，原生没有计数能力；浏览器不会为它生成序号，counter-increment 也不能直接作用于 <details></details>（因为它是“replaced element”，且默认 display 为 block，但 :before/:after 在某些 UA 样式下不生效）。强行用 counter-increment + ::before 往往在 Safari 或旧版 Chrome 中失效，或编号错位。
实操建议：
- 把编号逻辑交给父容器——用
<ol></ol>包裹<details></details>，让<li>承担计数职责 - 每个
<details></details>必须是<li>的**直接子元素**，不能嵌套在<p></p>或<div> 里 <li>移除 <code><details></details>的默认 margin，避免和<ol></ol>的缩进冲突
<ol> <li><details><summary>第一项</summary><p>内容…</p></details></li> <li><details><summary>第二项</summary><p>内容…</p></details></li> </ol>
summary前面显示编号需用CSS覆盖默认样式
即使用了 <ol></ol>，<summary></summary> 默认是 inline 元素，::before 插入的编号会紧贴文字左侧，但可能被浏览器的 UA 样式干扰（比如 Chrome 给 <summary></summary> 加了 padding-left）。
实操建议：
- 给
<summary></summary>设为display: flex，用::before生成编号并设固定宽度，再加 gap 控制间距 - 必须重置
<summary></summary>的list-style和padding，否则编号可能双显（ol 编号 + 自定义 before） - 不要依赖
counter-reset在<details></details>上——它不触发计数器更新
ol details summary {
display: flex;
align-items: center;
padding-left: 0;
list-style: none;
}
ol details summary::before {
content: counters(item, ".") ". ";
counter-increment: item;
width: 2.4em;
text-align: right;
font-weight: bold;
margin-right: 0.5em;
}
多层嵌套时计数器会混乱
如果页面有多个独立的 <details></details> 列表（比如 FAQ 分组、文档章节），共用一个 counter-name 会导致编号串行（如 “1.1 → 1.2 → 2.1” 跳成 “1.1 → 1.2 → 1.3”）。
实操建议：
- 按语义分组，每组外层用带 class 的
<ol class="faq-group"></ol>，CSS 中用.faq-group { counter-reset: faq-item; } - 对应 summary 的
::before改用counter-increment: faq-item，避免全局污染 - 禁用
counter-reset在 body 或 document 级别设置——它会让所有后代重置，破坏连续性
JavaScript补位只在CSS失效时考虑
极少数场景（如需要动态插入、兼容 IE11 或 SSR 后 hydrate 失败），CSS 计数器不可靠。此时可手动管理序号，但注意副作用：
- 用
document.querySelectorAll('details')获取后遍历，给每个<summary></summary>插入<span class="detail-number"></span>，再 setTextContent - 必须监听 DOM 变化（如
MutationObserver），否则新增的<details></details>不会自动编号 - 若页面有搜索/过滤功能，隐藏的
<details></details>仍会被计入序号——得配合 visibility 或 data-state 过滤
真正需要 JS 的情况很少，绝大多数现代项目，纯 CSS + <ol></ol> 组合已足够稳定。容易被忽略的是：编号是否要随折叠状态变化？答案是否定的——序号属于结构层级，和 open 状态无关，这点常被误当作交互需求去折腾。
