ol必须放在summary之后、之前，因summary仅允许内联内容，嵌套块级元素ol会触发浏览器dom自动修正、破坏点击区域及可访问性；正确结构为标题...。
ol 可以直接放在 details 内部，但必须确保它在 summary 之后、 之前 —— 这是唯一合法且稳定的位置。
为什么 ol 不能包在 summary 里
summary 是内联上下文元素，规范只允许其包含短文本或内联内容（如 span、em、图标等）。把 ol（块级元素）塞进 summary 会导致：
- 浏览器自动修正 DOM：把
ol移出summary，甚至提到details外层 -
summary点击区域被撑开或截断，iOS Safari 上点击失效 - 屏幕阅读器可能跳过列表，或误读为“标题+空内容”
ol 放在 details 里的正确结构
标准写法就是 summary 开头，后面紧跟 ol（或其他任意块级内容），不加 wrapper：
<details><summary>常见问题</summary><ol>
<li>第一条</li>
<li>第二条</li>
</ol></details>
这个结构能通过 HTML5 验证，所有现代浏览器都支持，且无障碍属性（如 aria-expanded）会自动同步。
嵌套有序列表时的注意事项
如果需要在 ol 里再展开子项（比如某条目下还有子步骤），不要用嵌套 details —— 它不被规范支持，iOS 和微信 X5 内核会直接失效。可选方案有：
- 用
ul或ol自身嵌套：一个li里面再放ol，这是完全合法的 - 若需交互折叠，改用
input[type="checkbox"] + label + ~ ol的纯 CSS 方案，子ol作为label的下一个兄弟节点 - 必须用 JS 控制时，监听父
details的toggle事件，再手动切换子容器的open属性（不能操作display）
真正容易被忽略的是：哪怕只是加了个空格或换行，也可能让 summary 和后续 ol 之间插入文本节点，导致某些老版本 Safari 把 ol 当作“非直接兄弟”而忽略样式匹配。所以写的时候尽量不换行，或用 HTML 注释消除空白符干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
