元素启用 CSS :focus 样式 ” />
默认情况下，`
在 Web 开发中，:focus 伪类仅适用于原生可聚焦元素（如 、
默认不属于该范畴——它虽具备交互性（点击展开/收起），但不参与键盘焦点流（即无法通过 Tab 键获得焦点），因此 details:focus 规则永远不会被触发。
要解决此问题，只需为
添加 tabindex=”0″ 属性。该属性将元素显式纳入文档的顺序焦点管理中，使其既可通过鼠标点击获取焦点，也可通过键盘 Tab 导航到达，并正确触发 :focus 样式：
summary should be blue on focus
Lorem ipsum dolor sit amet...
配合如下 css 即可实现预期效果：
立即学习“前端免费学习笔记（深入）”；
details:focus { outline: none; /* 可选：移除浏览器默认焦点轮廓 */ box-shadow: 0 0 0 2px #3b82f6; /* 蓝色焦点高亮 */ }⚠️ 注意事项：
- tabindex=”0″ 表示元素按 dom 顺序参与焦点流，无需额外 javaScript；
- 避免使用 tabindex=”-1″（仅支持程序化聚焦，不响应 Tab 导航）；
- 若需无障碍支持，建议同时为
添加 role=”button” 和适当的 ARIA 属性（如 aria-expanded 动态同步），以确保屏幕阅读器正确识别交互状态； - 不推荐全局重置 outline: none，应在提供足够视觉反馈（如 box-shadow 或背景色变化）的前提下谨慎移除，以保障键盘用户的可访问性。
总结：让
响应 :focus 的关键在于赋予其可聚焦能力——tabindex=”0″ 是简洁、标准且兼容性良好的解决方案。