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