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

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

默认情况下，`ails>` 元素不可聚焦，因此 `details:focus` 样式不会生效；需通过添加 `tabindex=”0″` 使其成为可聚焦的交互元素，才能正确响应 `:focus` 伪类。

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

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

也仅在点击时触发行为，不自动获得键盘焦点（例如按 Tab 键无法选中它），因此 details: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 顺序，影响屏幕阅读器用户。

总结：