清除 summary 默认点击反馈需三步：重置焦点轮廓并提供可访问替代样式，禁用 webkit 压感背景，阻止 marker 的 active 变化；同时须重置盒模型、清除原生 marker，并保障触控热区≥44px。
details 标签的“点击态”本身没有浏览器定义的 CSS 伪类（比如 :active 持续生效），你看到的所谓“点击态”，其实是 summary 元素在被鼠标按下时触发的原生 :active 状态，或聚焦时的 :focus 样式——它和展开/收起逻辑无关，只是视觉反馈。真正需要清除的，是浏览器对 summary 的默认样式干扰，而不是“点击态”本身。
为什么直接写 summary:active { outline: none; } 不够用
因为：summary 在 Safari、旧版 Chrome 中默认有 outline 或 background-color 变化；部分安卓 WebView 还会给 :active 加灰色压感背景；而这些样式往往藏在用户代理样式表里，不显式覆盖就可能残留。
-
summary的:active行为由浏览器控制，无法用pointer-events: none禁用（否则整个点击失效） - 仅清
outline不够：WebKit 下summary::-webkit-details-marker被点击时也可能附带高亮 - 若用了自定义图标（如
summary::before），图标本身可能响应:active，需单独重置
清除默认点击反馈的三步实操
目标是让点击时无闪烁、无色块、无轮廓，同时不破坏可访问性与 toggle 功能：
- 统一移除所有可能的焦点轮廓：
summary:focus { outline: none; }，并补上键盘可访问的替代方案（如box-shadow: 0 0 0 2px #3b82f6;） - 压制 WebKit 压感背景：
summary::-webkit-any-link { -webkit-tap-highlight-color: transparent; }（iOS/Safari 必加） - 禁用原生 marker 的 active 反馈：
summary::-webkit-details-marker:active { opacity: 1; }（防止 Safari 点击时 marker 消失或变色）
details 和 summary 的默认样式干扰点在哪
浏览器对 summary 的默认处理远不止“小箭头”：它自带 display: list-item、list-style-position: outside、某些版本还塞了 padding-inline-start，这些都会影响点击热区和视觉对齐。
- 必须先重置基础盒模型：
summary { display: block; margin: 0; padding: 0; } - 清除原生 marker 是前提：
summary::-webkit-details-marker, summary::marker { content: "";}，否则后续自定义图标会错位 - 不要碰
appearance: none：它在 Firefox 中无效，在 Safari 中可能破坏 toggle 行为
最易被忽略的是：清除样式后，summary 的点击热区可能变窄（尤其用了 display: inline-block 或内联元素包裹时），建议始终加 cursor: pointer 并用 min-height 或 padding 保障触屏可点区域 ≥ 44px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
