因为summary::marker在Safari≤15.6等旧版浏览器中不响应color等属性，最稳方案是用summary::before插入图标并配合details[open]旋转动画，兼顾兼容性与可访问性。
为什么直接对 summary::marker 设 color 没反应
因为浏览器渲染的原生小三角是 ::marker（或旧版 WebKit 的 ::-webkit-details-marker），它不是普通文本，不响应 color、font-size 等属性。你写 summary { color: red; } 或 summary::marker { color: red; } 在 Safari ≤15.6、部分 Edge 里完全无效。
最稳的图标替换方案：用 summary::before 插入内容
绕过浏览器标记兼容性差异，统一用伪元素控制图标，同时保留语义和键盘可访问性。
-
summary必须是details的第一个子元素，否则::before可能错位或失效 - 隐藏原生标记（可选但推荐）：
summary::marker { content: ""; }（Firefox/Chrome 有效；Safari 需配合list-style: none;） - 插入自定义图标：
summary::before { content: "▶"; margin-right: 6px; transition: transform 0.2s; } - 展开时旋转：
details[open] > summary::before { transform: rotate(90deg); } - 若要用 SVG 或字体图标，建议用
background-image+padding-left，避免content的字符限制（content不支持url()或attr()）
不同浏览器下 ::marker 的行为差异
想只靠 ::marker 改图标？得按浏览器分写：
- Firefox 79+ 和 Chrome/Edge 85+：支持
summary::marker { content: "▶"; color: #3b82f6; }，但color仅影响字符颜色，对 SVG 无效 - Safari ≤17.6：必须用
summary::-webkit-details-marker { all: unset; content: "▶"; }，否则默认内边距会导致图标偏移 - Safari 18.0+：开始完整支持标准
::marker，但老版本存量仍多，不建议单独依赖 - 所有版本都支持
summary::before，且不会破坏焦点逻辑或屏幕阅读器识别
容易被忽略的可访问性细节
图标只是视觉装饰，不能替代语义。以下三点常被跳过：
立即学习“前端免费学习笔记（深入）”；
- 给自定义图标加
aria-hidden="true"，防止读屏器重复播报（例如：<summary><span aria-hidden="true">▶</span>常见问题</summary>） - 不要对
summary设置pointer-events: none，哪怕只作用于图标区域——整个触发区会失效 - 避免用
transform: scale()调整图标大小，某些 Safari 版本会缩小时丢失点击热区
details 的支持不一，真机测试比查 CanIUse 更管用。 
