元素支持 :focus 伪类样式
" />
默认情况下，`
在标准 HTML 中，只有原生可交互元素（如 <button>、<input>、<a href>、<select> 等）默认具有焦点能力，能自然响应 :focus 伪类。而 <details> 虽然语义上用于展开/收起内容，但并非原生可聚焦元素——其内部的 <summary> 也仅在点击时触发行为，不自动获得键盘焦点（例如按 Tab 键无法选中它），因此 details:focus 规则始终不匹配。
✅ 正确做法：为 <details> 添加 tabindex="0"
该属性使元素成为显式可聚焦节点，既可通过键盘 Tab 导航进入，也可被 JavaScript 的 .focus() 方法调用，并真正触发 :focus 伪类：
<details tabindex="0"> <summary>点击或按 Tab 可聚焦此 summary</summary> <p>展开后可见的内容...</p> </details>
配合 CSS 即可实现焦点高亮效果：
details:focus {
outline: none; /* 可选：移除浏览器默认焦点轮廓 */
box-shadow: 0 0 0 2px #3b82f6; /* 自定义焦点样式，如蓝色光环 */
}⚠️ 注意事项：
- 不要使用 tabindex="-1"：它仅允许 JS 主动聚焦（.focus()），但无法通过 Tab 键导航到达，故不满足可访问性要求；
- 若需保留 <summary> 的默认点击行为，无需额外处理——tabindex="0" 应加在 <details> 上（而非 <summary>），因为 <summary> 在 <details> 聚焦后会自动获得视觉焦点指示（部分浏览器会高亮 summary 文本）；
- 为保障无障碍体验（a11y），建议同时添加 role="group" 和 aria-expanded 属性（由浏览器自动管理），或在 JS 控制时同步更新 aria-expanded 值；
- 避免滥用 tabindex="0"：仅对确实需要键盘操作的非交互元素启用，否则会打乱页面 Tab 顺序，影响屏幕阅读器用户。
总结：<details> 默认不可聚焦是符合规范的设计，若需 :focus 样式，唯一标准且兼容的方案就是为其添加 tabindex="0"。这一做法轻量、无侵入性，且完全符合 WAI-ARIA 实践指南。
