details标签本身不可聚焦，:focus样式无效；真正可聚焦并显示轮廓的是其子元素<summary>，需针对summary:focus设置outline: none并注意浏览器UA样式覆盖问题。

details标签本身不响应:focus，别白费劲写 details:focus

直接给 details 写 :focus 样式永远无效——它默认不可聚焦，浏览器根本不把它放进键盘焦点流。你看到的“蓝圈”或“黑边”从来不是 details 自己的，而是来自它的子元素 summary 或用户误点触发的父级/祖先焦点样式。想清掉什么，先得确认清的是谁。

summary:focus 的 outline 怎么真正去掉

真正能获得焦点并显示默认轮廓的是 summary，但它的 outline 行为比普通按钮更顽固：

• 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 样式叠加，容易误判来源。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 检查是否同时写了 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()，状态抖动比样式问题更易引发视觉异常

细节都在浏览器对 summary 的 UA 样式实现里，而不是你写的 CSS 规则层级问题。想清掉什么，先用 DevTools 的 “Computed” 面板点开 summary 元素，展开 :focus 状态，看哪条 outline 是从哪里来的——UA stylesheet 里的那行才是真正的源头。