summary背景高亮失效主因是移动端浏览器tap highlight覆盖CSS，应使用cursor: unset禁用默认高亮并配合:active实现点击态；details:open用于展开后状态高亮，二者用途不同。

details点击时summary背景高亮失效的常见原因

标签本身不响应:active或:focus来触发视觉反馈，尤其在移动端——浏览器对<summary></summary>的触摸高亮（tap highlight）有独立处理逻辑，会覆盖你写的background-color。这不是 CSS 写错了，而是 UA 样式优先级更高。

• summary默认没有cursor: pointer，部分安卓浏览器点按无反馈
• iOS Safari 会强加一层半透明灰色 overlay，即使你写了background: #fff也挡不住
• :hover在触屏设备上基本不可靠，不能当作点击态依据

用cursor: unset禁用默认触摸高亮

这是目前最轻量、兼容性最好的解法。它不依赖 JS，也不需要监听事件，直接从根源切断浏览器的高亮行为：

summary {
  cursor: unset;
  background-color: #f9fafb;
  transition: background-color 0.15s ease;
}
<p>summary:active {
background-color: #e5e7eb;
}

• cursor: unset不是为了改光标，而是告诉浏览器：“别给我加 tap highlight”
• 必须配合:active才能看到点击瞬间变色；只写:hover在手机上无效
• 不要加user-select: none，否则长按可能触发复制而非激活状态

想让展开后整个details容器高亮怎么办

:open伪类才是状态锚点，但它不表示“正在被点击”，而是“当前已展开”。如果你要的是「展开即高亮容器」，而不是「点击瞬间高亮」，那就该用：

details:open {
  border-left: 3px solid #3b82f6;
  background-color: #f8fafc;
}
<p>details:open summary {
font-weight: 600;
}

• details:open和summary:active是两回事：前者是结果态，后者是瞬态
• 如果同时需要两种效果，两个规则可以共存，但别混淆用途
• 注意 Safari 对details:open的渲染延迟比 Chrome 明显，动画建议加will-change: contents微调

JS监听toggle事件后动态加 class 的风险点

有人用el.addEventListener('toggle', () => el.classList.toggle('is-active'))来控制高亮，这在语义上没问题，但容易踩坑：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• toggle事件在用户键盘操作（空格/回车）时也会触发，但:active不会生效 → 视觉反馈不一致
• 若内容区域高度动态（比如含图片或异步加载文本），is-active class 加得太早会导致布局抖动
• SSR 渲染时若服务端已设open，客户端 hydration 阶段可能漏掉首次toggle事件

真正需要点击态反馈的场景，优先走纯 CSS 方案；只有当高亮逻辑必须耦合数据状态（比如“仅当前选中项高亮”）时，才引入 JS 控制 class。

立即学习“前端免费学习笔记（深入）”；

细节在于：高亮是给用户一个即时操作确认，不是状态同步。别让open属性或toggle事件替你做本该由:active完成的事。