:focus-within需作用于包裹可聚焦子元素的直接或间接父容器，子元素必须真实获焦且未被tabindex="-1"等阻断，推荐用outline或box-shadow实现高亮。

直接给表单容器加 :focus-within 就能高亮，但必须确保内部有真实获得焦点的可聚焦元素，否则样式不会触发。

父容器必须写对位置

:focus-within 只在包裹可聚焦子元素的**直接或间接父级**上生效。不能写在 <input> 自身上，也不能跨层乱选。

• ✅ 正确：.form-item:focus-within（<input> 在 .form-item 内部）
• ❌ 错误：input:focus-within（叶子节点无法监听自己）
• ❌ 错误：body:focus-within（太宽泛，无实际意义，且易被干扰）

子元素得真正“获焦”

只有浏览器确认焦点落在某个可聚焦元素上，:focus-within 才会计算。常见可聚焦元素包括：

• <input>、<textarea></textarea>、<select></select>、<button></button>
• 带 tabindex="0" 的 <div> 或 <code><span></span>
• contenteditable="true" 元素（部分浏览器需加 tabindex="0" 才稳定）

如果用了自定义组件（如封装的输入框），要检查原生 <input> 是否被设了 tabindex="-1" 或 pointer-events: none——这些会拦住焦点，导致伪类失效。


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载

立即学习“前端免费学习笔记（深入）”；

结构和样式别“吃掉”焦点链

以下情况会让 :focus-within 看似不工作，其实是 DOM 或 CSS 干扰了浏览器判断焦点归属：

• display: contents 或 visibility: hidden 包裹了输入框 → 浏览器无法确认焦点落点
• 父容器没盒模型（比如没 padding、border、display），改了背景也看不见
• label 和 input 没构成祖先-后代关系（如分离式 <label for="x"></label><input id="x">），点击 label 不会触发 input 聚焦
• 父容器是纯文本节点，或被 overflow: hidden 截断，焦点事件无法正常冒泡

高亮样式推荐写法

视觉反馈要清晰，但不能破坏布局或影响键盘导航：

• 优先用 outline: 2px solid #007bff：不占空间、无重排、屏幕阅读器友好
• 要用阴影，写成 box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25)，避免 inset
• 背景色微调可用，如 background-color: #f8f9fa，别写 transparent 防止被继承覆盖
• 绝对不要在规则里改 height、margin、display 或 padding，容易引发跳动