能，但需确保表单行内可聚焦元素（如input）真正获得焦点；若外层wrapper未设tabindex或存在焦点拦截，:focus-within将不生效。
focus-within 能直接作用在表单行上吗
能，但前提是 HTML 结构必须满足父元素能“感知”子元素的聚焦状态。:focus-within 不是魔法，它只在目标元素自身或其任意后代触发 focus 事件时生效。常见错误是把 :focus-within 写在 <tr> 或 <div class="form-row"> 上，结果没反应——大概率因为里面的 <input> 被套了额外的 wrapper（比如 <label>、<span> 或 React 的自定义组件），而这个 wrapper 没设 tabindex，导致焦点“卡住”，没真正落到可聚焦的后代上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保输入控件本身是可聚焦的（原生
<input>、<textarea>、<select>默认支持；自定义组件需加tabindex="0"） - 避免在
<input>外层包裹不可聚焦的<div>（比如<div><input></div>是 OK 的，但若该<div>有pointer-events: none或visibility: hidden，会干扰聚焦链） - 不要依赖 JavaScript 模拟 focus（如
el.focus()后没触发真实焦点事件，:focus-within不会响应）
怎么写 CSS 才让整行高亮又不破坏布局
:focus-within 本身不改变盒模型，但高亮方式选错容易引发重排或视觉跳动。最稳妥的是用 outline 或 box-shadow，而不是改 border 或 padding。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
outline: 2px solid #007bff：不占布局空间，无重排风险，兼容性好（IE 不支持，但现代项目基本可忽略） - 如果要阴影效果，用
box-shadow: 0 0 0 2px rgba(0,123,255,0.25)，注意别漏掉inset参数——加了inset会往里缩，可能盖住文字 - 避免在
:focus-within规则里改height、margin或display，尤其在表格中（<tr>高度变化会导致整表重绘） - 如果行内有多个输入框，且只想高亮当前聚焦的那个“逻辑行”，就别把
:focus-within放在太外层的容器上（比如整个<form>），而是精确到每个<div class="form-row">
React/Vue 里 :focus-within 失效的典型原因
框架组件常封装了原生输入控件，比如 <MyInput> 内部是 <input ref={innerRef}>，但没透传 tabIndex 或没绑定 onFocus 到根节点，导致 :focus-within 查不到活跃后代。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查渲染后的 DOM：打开 DevTools，手动点输入框，看焦点是否落在预期的
<input>上（不是父级<div>） - 在自定义组件中显式透传
tabIndex和autoFocus属性，并确保ref正确转发到原生<input> - Vue 用户注意
v-model不影响聚焦行为，但若用了contenteditable+div模拟输入框，得手动加tabindex="0"并监听focus事件 - Next.js 或 SSR 场景下，CSS 未注入或 hydrate 前样式缺失，可加
suppressHydrationWarning或服务端先注入基础 focus 样式
兼容性与降级方案要不要做
如果目标用户包含 Edge 17–18 或 Safari 15.4 以下，:focus-within 会失效。但纯靠 JS 模拟（监听 focus/blur 给父元素加 class）成本不高，且比硬上 polyfill 更可控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports selector(:focus-within)包裹原生方案，里面写 CSS；外面写 JS 降级逻辑（不推荐全局 polyfill，因为会污染所有:focus-within使用点） - JS 降级只需监听
focusin和focusout（冒泡版），委托到 form 容器即可，不用给每个 input 单独绑 - 避免同时开 JS + CSS 两套方案（比如既写
:focus-within又用 JS 加 class），否则 Safari 15.4 下可能闪动或冲突 - 移动端 iOS Safari 对
:focus-within支持良好，但软键盘弹出会触发 resize，有时导致样式重算异常，可加will-change: outline微优化
真正麻烦的不是写法，是结构里那些看不见的 wrapper 和框架封装层——它们不动声色地截断了焦点传播链，而你只能靠 DevTools 一层层点进去看 focus 是否真的落到了 input 上。
