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

CSS 的 `:focus-within` 伪类常被误以为类似悬停效果，实则严格依赖子元素真实获得焦点——若容器内没有可聚焦元素（如 ``、`` 等默认可聚焦标签，或显式添加 `tabindex="0"` 的元素），样式将完全失效；它不响应鼠标事件，不预生效，不跨 Shadow DOM 边界，且在 SSR 首屏、隐藏元素或焦点目标错误时极易“静默失败”，掌握 `tabindex` 的正确取值逻辑（`0` 用于标准导航，`-1` 仅支持 JS 主动聚焦）和调试方法（检查 `document.activeElement`、验证 DOM 挂载时机）才是解决问题的关键。

为什么 :focus-within 完全没反应

最常见原因是容器内部压根没有可聚焦元素——:focus-within 不是监听“鼠标悬停”或“点击”，它只在**子树中某个元素获得焦点（focus）时才触发**。如果里面全是