:focus-within能直接解决父容器响应子元素焦点的问题，如高亮整个.form-group、显示.clear-btn、多字段共用外层容器激活、验证后自动恢复样式；失效主因是父容器无tabindex="-1"、焦点链被display:contents中断、label与input分离且外层未设tabindex。
哪些表单交互问题能被:focus-within直接解决
它专治「父容器需要响应子元素焦点」这类需求，且无需 JS 就能落地。常见场景不是“能不能做”，而是“有没有写对结构”。
- 点击 label 或 tab 到 input 时，高亮整个
.form-group区域（背景、边框、阴影） - 输入框获得焦点时，显示隐藏的
.clear-btn按钮（.input-wrapper:focus-within .clear-btn { display: block; }） - 多字段组合（如日期选择器中年/月/日三个
input）共用一个外层容器，任一获焦即激活整体状态 - 表单验证失败后，用户再次聚焦某字段，自动移除错误提示或恢复默认样式（配合 class 切换）
.form-group:focus-within 不生效的三个真实原因
不是伪类写错了，是浏览器压根没算这个表达式——它连“监听资格”都没拿到。
-
.form-group是纯div，没tabindex="-1"，也不属于原生可聚焦元素（如form、button），浏览器不把它纳入焦点流计算范围 - input 被套在
display: contents的 wrapper 里，DOM 结构上仍是后代，但渲染树中断了焦点归属路径 - label 和 input 是分离结构（
label[for="x"]+input#x），但外层没设tabindex="-1"，点击 label 触发 focus 事件后，焦点链无法反向映射到父容器
为什么不能把 :focus-within 写在 input 上
input:focus-within 永远不会匹配。这不是兼容性问题，是规范定义：伪类要求目标元素必须能“监听”后代，而 input 是叶子节点，没有后代可监听。
-
input:focus控制自身状态（比如改 border-color） -
.form-group:focus-within才是正确监听者，只要内部input、textarea、button或任何带tabindex的元素获焦，它就响应 - React/Vue 自定义组件中，若原生
input被加了tabindex="-1"或pointer-events: none，也会导致监听失效
高亮样式容易引发布局抖动的两个操作
很多“失效”其实是视觉反馈副作用造成的：用户看到跳动、遮挡、错位，下意识以为功能坏了。
- 在
:focus-within规则里改height、margin、padding或display：表格中tr高度变化会整行重绘；嵌套容器 padding 变化可能撑开父级，覆盖文字 - 用
box-shadow: inset：阴影往里缩，容易盖住 input 文字或 label，尤其在小字号或紧凑布局中 - 推荐方案：
outline: 2px solid #007bff（不占空间、无重排、键盘导航友好），或box-shadow: 0 0 0 2px rgba(0,123,255,0.25)（非 inset）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
