CSSfocus-within样式不生效？检查可聚焦元素

tabindex 的值直接决定元素能否被键盘聚焦，也影响 :focus-within 是否触发：

• tabindex="0"：元素参与标准 Tab 顺序，最常用
• tabindex="1" 或更大：强制插入 Tab 顺序靠前位置，容易打乱可访问性流，慎用
• tabindex="-1"：不能通过 Tab 进入，但可用 JS 调用 .focus()，此时仍会激活父容器的 :focus-within
• 不写 tabindex 或设为 -2 及更小：完全不可聚焦，不会触发 :focus-within

示例：想让卡片点击后高亮边框，又支持键盘导航

<article class="card">
  <h3>标题</h3>
  <p>内容</p>
  <button tabindex="0">操作</button>
</article>

.card:focus-within {
  outline: 2px solid #007bff;
}

JavaScript 主动聚焦却没触发 :focus-within

有时你调用了 element.focus()，但父容器样式还是没变——大概率是聚焦目标不是容器的**后代元素**，而是平级或外部节点。

• 确保 .focus() 调用在容器内部的元素上，比如 card.querySelector('button').focus()，而不是 card.focus()
• 如果用 tabindex="-1" 给容器自己加了聚焦能力，那触发的是 card:focus，不是 :focus-within
• 动态插入的内容（如 Vue/React 渲染后），需确认 DOM 已挂载完成再调用 .focus()，否则聚焦无效

调试技巧：在控制台执行 document.activeElement，看当前焦点是否落在你预期的子元素上。

兼容性与 SSR 场景下的失效

:focus-within 在 Chrome 60+/Firefox 61+/Safari 15.4+ 支持良好，但仍有两个隐蔽坑点：

• 服务端渲染（SSR）页面首次加载时，若焦点逻辑依赖客户端 JS，而 CSS 已提前注入，:focus-within 无法“预生效”——它纯属运行时行为，没有 JS 就永远不触发
• 某些旧版 Safari（如 iOS 15.0–15.3）对 tabindex="-1" 元素触发 :focus-within 表现不稳定，建议优先用 tabindex="0"
• 使用 Shadow DOM 时，:focus-within 不跨 shadow boundary，即宿主元素不会响应内部 slot 中聚焦事件

真正容易被忽略的是：这个伪类不支持“模拟聚焦”——哪怕你用 element.focus({preventScroll: true})，只要元素没出现在可访问性树里（比如 display: none 或 visibility: hidden），它照样不工作。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。