如何让 元素支持 :focus 伪类样式

元素支持 :focus 伪类样式 "> 元素支持 :focus 伪类样式 " />

默认情况下，`ails>` 元素不可聚焦，因此 `details:focus` 样式不会生效；需通过添加 `tabindex

="0"` 使其成为可聚焦的交互元素，才能正确响应 `:focus` 伪类。

在标准 HTML 中，只有原生可交互元素（如 、、、 等）默认具有焦点能力，能自然响应 :focus 伪类。而

虽然语义上用于展开/收起内容，但并非原生可聚焦元素——其内部的

也仅在点击时触发行为，不自动获得键盘焦点（例如按 Tab 键无法选中它），因此 details:focus 规则始终不匹配。

✅ 正确做法：为

添加 tabindex="0"
该属性使元素成为显式可聚焦节点，既可通过键盘 Tab 导航进入，也可被 JavaScript 的 .focus() 方法调用，并真正触发 :focus 伪类：

  
点击或按 Tab 可聚焦此 summary
  
展开后可见的内容...

配合 CSS 即可实现焦点高亮效果：

details:focus {
  outline: none; /* 可选：移除浏览器默认焦点轮廓 */
  box-shadow: 0 0 0 2px #3b82f6; /* 自定义焦点样式，如蓝色光环 */
}

⚠️ 注意事项：

• 不要使用 tabindex="-1"：它仅允许 JS 主动聚焦（.focus()），但无法通过 Tab 键导航到达，故不满足可访问性要求；
• 若需保留
  的默认点击行为，无需额外处理——tabindex="0" 应加在

  上（而非

  ），因为

  在

  聚焦后会自动获得视觉焦点指示（部分浏览器会高亮 summary 文本）；
• 为保障无障碍体验（a11y），建议同时添加 role="group" 和 aria-expanded 属性（由浏览器自动管理），或在 JS 控制时同步更新 aria-expanded 值；
• 避免滥用 tabindex="0"：仅对确实需要键盘操作的非交互元素启用，否则会打乱页面 Tab 顺序，影响屏幕阅读器用户。

总结：

默认不可聚焦是符合规范的设计，若需 :focus 样式，唯一标准且兼容的方案就是为其添加 tabindex="0"。这一做法轻量、无侵入性，且完全符合 WAI-ARIA 实践指南。