元素添加: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 导航）；
• 若需无障碍支持，建议同时为
  添加 role="button" 和适当的 ARIA 属性（如 aria-expanded 动态同步），以确保屏幕阅读器正确识别交互状态；
• 不推荐全局重置 outline: none，应在提供足够视觉反馈（如 box-shadow 或背景色变化）的前提下谨慎移除，以保障键盘用户的可访问性。

总结：让