17370845950

元素启用 CSS :focus 样式 "> 元素启用 CSS :focus 样式 " />

默认情况下，`ails>` 元素不可聚焦，因此 `details:focus` 选择器无效；需通过添加 `tabindex="0"` 使其成为可聚焦的交互元素，才能正确响应 `:focus` 伪类并应用自定义焦点样式。

在 Web 开发中，:focus 伪类仅适用于原生可聚焦元素（如 、、 等），而

默认不属于该范畴——它虽具备交互性（点击展开/收起），但不参与键盘焦点流（即无法通过 Tab 键获得焦点），因此 details: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 或背景色变化）的前提下谨慎移除，以保障键盘用户的可访问性。

总结：让