summary 默认 display 是 block 而非 list-item；箭头由 ::marker 或内部逻辑控制，与 display 无关；强行设为 list-item 会破坏可访问性和交互行为；现代浏览器可用 ::marker 定制箭头，safari 不支持需降级处理。
summary 元素默认 display 是什么
不是 list-item，而是 block。浏览器对 <summary></summary> 的 UA 样式里压根没设 display: list-item，那个小箭头是伪元素（::marker）或内部渲染逻辑控制的，跟 display 值无关。强行设成 list-item 不仅不会增强箭头控制力，反而可能破坏可访问性（比如屏幕阅读器误判层级）。
怎么改 summary 的箭头样式
现代浏览器支持用 ::marker 伪元素定制箭头，但兼容性有坑：
- Chrome / Edge 117+、Firefox 124+ 支持
content+text替换箭头，例如：summary::marker { content: "▸ "; } - Safari 目前（v17.5）仍不支持
summary::marker，只能靠list-style配合display: list-item拙劣模拟——但这会丢失原生details/summary的语义和键盘行为（如空格/回车切换展开） - 如果必须兼容 Safari，更稳妥的方式是放弃原生
<summary></summary>，用<button role="button" aria-expanded></button>自行实现，再用::before控制图标
为什么 display: list-item 会让 summary 行为异常
因为 <summary></summary> 的交互逻辑（点击触发 <details></details> 切换）依赖于其作为 <details></details> 第一个子元素的特殊地位。一旦设 display: list-item，部分浏览器（尤其是旧版 Safari）会把它当普通列表项处理，导致：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 点击区域变小或偏移（
list-style-position影响布局） - 键盘焦点跳过该元素（
tabindex失效） -
aria-expanded同步失败（JS 监听toggle事件失效） - 打印样式错乱（
list-item触发额外缩进）
真正可控的箭头方案推荐
别碰 display，直接用 CSS 变量 + ::marker 分层控制：
details > summary {
list-style: none; /* 先清掉 UA 默认 marker */
}
details > summary::marker {
content: var(--summary-arrow, "▶");
color: var(--arrow-color, #666);
}
/* 展开时旋转箭头 */
details[open] > summary::marker {
content: var(--summary-arrow-open, "▼");
}
注意：变量需在 <details></details> 或祖先上定义，否则无法响应状态变化；Safari 用户仍需降级 fallback（比如用 JS 注入 <span class="summary-icon"></span>）。
箭头本质是可访问性控件的一部分，过度自定义容易让屏幕阅读器读成“列表项”而非“可切换摘要”，这点比样式本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
