:focus-within 能直接生效的前提是子元素真正可聚焦，即浏览器认定其“当前拥有焦点”；有效元素包括 、、、、带 tabindex="0" 的元素及有 href 的 标签。

:focus-within 能直接生效，但前提是子元素必须真正可聚焦——不是“能被点”，而是“能获得焦点”。否则样式永远不会触发。

哪些子元素能真正激活 :focus-within

只有浏览器认定“当前拥有焦点”的元素才能触发该伪类。常见有效元素包括：

• <input>、<textarea></textarea>、<select></select>、<button></button>（默认可聚焦）
• 带 tabindex="0" 的元素（如 <div tabindex="0">） <li> <code><a></a>（有 href 属性时）

无效情况很常见：<div> 即使加了 <code>tabindex="-1"，但没调用 .focus()，就不会激活 :focus-within；disabled 或 readonly 的 <input> 也无法获得焦点，伪类自然不匹配。

:focus-within 的写法和典型错误

直接写在父容器上即可，但容易踩这些坑：


使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
• 误写成 .card div:focus-within：这是让 div 自身响应，不是父级 .card —— 正确写法是 .card:focus-within
• 混用 :hover:focus-within：这是“同时悬停+内部聚焦”，通常你需要的是“任一满足”，应改为 .card:hover, .card:focus-within
• 父容器用了 display: contents 或 contain: layout：可能打断焦点冒泡路径，导致伪类失效

示例正确用法：

form:focus-within {
  background-color: #e6f7ff;
}

兼容性与 fallback 方案

:focus-within 在 Chrome 60+、Firefox 61+、Safari 15.4+ 中原生支持；iOS 15.4 及更早版本不支持。如果需兼容旧 Safari，不能只靠 CSS：

• JS fallback 需监听 focusin 和 focusout（注意用 focusin，它会冒泡，而 focus 不会）
• 避免在 :focus-within 规则里改 display 或触发布局重排，尤其在 Safari 中可能造成焦点丢失
• Shadow DOM 内部的可聚焦元素仍能触发外层 :focus-within，这点比 :has() 更可靠

最常被忽略的一点：焦点是否真的落在目标子元素上，得靠 document.activeElement 实时验证，而不是仅凭点击动作判断——很多“不生效”其实是焦点被 outline: none 隐藏后，误以为没聚焦。