直接写 outline: none 在 <summary> 上通常无效，因浏览器对 <details>/<summary> 有强默认焦点样式且 UA 样式可能含 !important；应优先用 summary:focus-visible { outline: none; } 并提供替代视觉反馈，兼容性差时降级为 summary:focus { outline: none !important; }，同时注意 details 元素的 outline 溢出问题。
summary 元素的 outline 为什么删不掉
直接写 outline: none 在 <summary> 上通常无效，因为浏览器对 <details>/<summary> 的焦点样式有强默认规则（尤其在 Chrome/Firefox 中），且 outline 可能被 UA 样式表用 !important 声明，普通 CSS 优先级不够。
必须用 :focus-visible 配合 outline: none
现代做法是只在用户明确用键盘聚焦时才控制 outline，避免破坏可访问性。直接覆盖 :focus 会同时禁用键盘导航焦点，不推荐。
- 用
summary:focus-visible替代summary:focus - 加
outline: none，并提供替代视觉反馈（比如background-color或box-shadow） - 确保不移除鼠标点击时的 focus 状态（
:focus-visible在鼠标操作下一般不触发）
summary:focus-visible {
outline: none;
background-color: #f5f5f5;
}
兼容性差时 fallback 到 :focus + !important
如果项目需支持旧版 Safari（:focus-visible 支持度有限），可降级使用 :focus，但务必加 !important 并测试可访问性影响：
summary:focus { outline: none !important; }- 必须同步添加其他视觉反馈，否则键盘用户将无法判断当前聚焦项
- 部分旧版本 Safari 对
<summary>的:focus触发不稳定，建议实测
别漏掉 details 元素的 outline 溢出问题
有时看起来像是 <summary> 有 outline，其实是父级 <details> 被聚焦（比如 JS 主动调用 .focus()），而它的默认 outline 没被重置：
立即学习“前端免费学习笔记（深入）”；
- 检查是否误对
<details>调用了.focus() - 必要时也加
details:focus { outline: none; } - 注意：移除
<details>的 focus outline 不影响可访问性，因实际交互入口是<summary>
outline: none，而是判断焦点来源、保留键盘可用性、兼顾旧浏览器行为——这些细节一漏，UI 就要么残障不可用，要么在 Safari 里突然又冒蓝框。 
