details标签本身不可聚焦，:focus样式无效；真正可聚焦并显示轮廓的是其子元素，需针对summary:focus设置outline: none并注意浏览器ua样式覆盖问题。
details标签本身不响应:focus，别白费劲写 details:focus
直接给 details 写 :focus 样式永远无效——它默认不可聚焦，浏览器根本不把它放进键盘焦点流。你看到的“蓝圈”或“黑边”从来不是 details 自己的，而是来自它的子元素 summary 或用户误点触发的父级/祖先焦点样式。想清掉什么，先得确认清的是谁。
summary:focus 的 outline 怎么真正去掉
真正能获得焦点并显示默认轮廓的是 summary，但它的 outline 行为比普通按钮更顽固：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
outline: none必须显式写在summary:focus上，只写summary或details summary没用 - 某些浏览器（尤其是 Safari）在
summary被包裹进display: flex容器或加了position: relative后，会重新应用 UA outline 样式，此时需提高权重：summary:focus { outline: none !important; } - 别漏掉
outline-offset: 0，否则可能残留偏移像素导致视觉错位 - 完全移除 outline 会损害键盘可访问性，更稳妥的做法是替换：用
box-shadow或变色border提供等效反馈
为什么加了 tabindex="0" 后 outline 又回来了
给 details 加 tabindex="0" 确实能让它可聚焦，但它获得焦点时，summary 通常也仍处于聚焦状态（尤其点击 summary 时），两个元素的 :focus 样式叠加，容易误判来源。
- 检查是否同时写了
details:focus和summary:focus，两者都生效就会重复渲染 - 若只需控制 summary 的焦点样式，就不要给 details 加 tabindex；若必须让 details 可聚焦（比如做手风琴主控），建议统一用
details:focus-within来接管整体焦点态，避免样式打架 - 加了 tabindex 后，记得同步补上
role="group"和aria-labelledby，否则屏幕阅读器可能无法正确关联 summary 和内容
移动端点击后残留高亮或闪动怎么压
iOS Safari 和部分安卓 WebView 在 summary 上点击后，会额外触发伪类 :active 或内部 focus 状态残留，表现为灰色蒙层、文字变暗或短暂 outline 闪现：
- 加
-webkit-tap-highlight-color: transparent;到summary，这是最直接的 tap 高亮清除方式 - 避免对
summary使用user-select: none，它在某些版本中会干扰焦点状态同步 - 如果用了自定义图标（如
summary::before），确保该伪元素没意外继承outline或触发:focus（伪元素本身不可聚焦） - 真遇到闪动，优先检查是否在 JS 中反复设置
open属性或触发toggle()，状态抖动比样式问题更易引发视觉异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
