details嵌套时子菜单箭头方向错乱需用::marker重置，缩进须用padding-left按层级显式设置，点击一级导致二级自动收起是因选择器未限定作用域，三层以上应改用语义化列表结构。
details嵌套时子菜单箭头方向错乱
浏览器对 details 的 summary 箭头是通过伪元素控制的，原生不支持跨层级继承样式。直接嵌套会导致子级箭头仍显示默认三角（▼），和父级一样，视觉上分不清层级关系。
必须手动重置子级 summary 的标记：
details details summary::marker {
content: "▸";
}
如果需要更精细控制（比如不同层级用不同符号），可加层级限定：
details > details summary::marker { content: "▹"; }
details > details > details summary::marker { content: "⋯"; }
注意：::-webkit-details-marker 在部分旧版 Safari 中需单独处理，但 ::marker 已在主流浏览器稳定支持（Chrome 98+、Firefox 89+、Safari 15.4+）。
子菜单缩进失效或错位
text-indent 对 summary 无效，且会破坏可访问性；缩进必须靠 padding-left 控制。
常见错误是给所有 details 统一设 padding-left: 20px，结果每层都叠加，第三级缩进变成 60px——太深反而难读。
推荐做法是按层级显式定义：
-
details：不设缩进（顶层菜单对齐左边界） -
details > details：padding-left: 1.5em -
details > details > details：padding-left: 3em
避免用 em 以外的单位（如 px），否则字体缩放时缩进会失准。
点击一级菜单时二级自动收起
这是最常见的 DOM 干扰问题：没加选择器限定，导致 details[open] 样式污染所有后代 details。
错误写法（全局生效）：
details[open] { background: #f5f5f5; }
正确写法（只作用于直系子级）：
details > details[open] { background: #f9f9f9; }
details > details > details[open] { background: #fcfcfc; }
同时，确保 HTML 结构严格符合「子 details 必须是父 summary 的兄弟节点，且位于同一 details 内部」，例如：
<details><summary>一级</summary><details><summary>二级</summary><p>内容</p></details></details>
如果把子 details 放在 summary 内部，浏览器会自动移出，造成结构断裂。
嵌套超过三层就该换方案
details 原生只适合一到两级折叠菜单。嵌套三层以上，不仅样式难控，还会触发可访问性问题：屏幕阅读器可能无法正确 announce 层级关系，键盘导航（Tab / Arrow）也容易跳过中间层级。
此时应切换为语义化列表结构：
- 用
<ul><li> <button aria-expanded></button><ul>…</ul> </li></ul>替代嵌套details - 用
aria-controls和aria-labelledby显式关联控件与内容区 - 配合
contain: layout防止滚动卡顿（尤其在长列表中）
别为了“少写 JS”硬撑多层 details——它不是通用树形组件，而是为单层摘要/详情设计的语义标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
