本文介绍如何仅用纯 css 实现：当深层嵌套的 `` 获得焦点时，自动显示其外部（非父级）的指定 `
`；失焦时则隐藏——关键在于正确使用 `:focus-within` 伪类与相邻兄弟选择器（`+`），无需 javascript。
在实际开发中（尤其是使用 Vuetify 等 UI 框架时），表单控件结构往往高度封装，<input> 可能深藏于多层 <div> 内部，无法通过常规父子关系选择器（如 > 或 ~）直接控制外部元素。此时，:focus-within 是解决该问题的理想方案。
✅ 正确原理：:focus-within 作用于包含聚焦元素的祖先容器
:focus-within 并非作用于 <input> 本身，而是匹配自身或其任意后代获得焦点的元素。因此，应将其应用于 <input> 的最近公共祖先容器（如 .v-text-field），再结合相邻兄弟选择器 + 定位目标元素：
/* 当 .v-text-field 内任一子元素（含 input）获得焦点时，触发后续兄弟元素显示 */
.v-text-field:focus-within + .class-target {
display: block;
}
/* 默认隐藏目标元素 */
.class-target {
display: none;
/* 建议添加基础样式确保视觉可见性（可选） */
padding: 8px 12px;
background: #f0f9ff;
border: 1px solid #bee1ff;
border-radius: 4px;
}? HTML 结构要求（关键！）
目标元素（.class-target）必须是 .v-text-field 的紧邻兄弟元素（即同级、且紧跟其后），才能被 + 选择器精准捕获：
<!-- ✅ 正确结构：.class-target 紧跟 .v-text-field --> <div class="v-input custom-search input-small v-text-field"> <!-- ... 复杂嵌套的 input（无需修改） ... --> <input id="input-17" type="text" value=""> </div> <div class="class-target">Target</div> <!-- ← 必须在此位置 --> <!-- ❌ 错误示例：若 .class-target 在其他位置（如父容器外、非相邻），选择器将失效 --> <!-- <div class="wrapper"> ... </div> --> <!-- <div class="class-target">Target</div> -->
⚠️ 注意事项与常见误区
- 不要写成 input:focus-within > .class-target：:focus-within 不适用于 <input> 自身（它无子元素），且 > 要求 .class-target 是 input 的直接子元素，而实际中二者完全不相关。
- 避免使用 ~（通用兄弟选择器）：虽然 ~ 也能匹配后续兄弟，但 + 更精准、性能略优，且语义更清晰（仅影响下一个紧邻元素）。
- 兼容性提示：:focus-within 在现代浏览器（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+）中已全面支持；如需兼容 IE，需降级为 JavaScript 方案。
- 无障碍友好：该方案天然支持键盘 Tab 导航触发焦点，符合 WCAG 标准，无需额外处理。
? 扩展技巧：支持多个目标元素
若需同时控制多个相邻元素，可叠加选择器：
立即学习“前端免费学习笔记（深入）”；
.v-text-field:focus-within + .class-target,
.v-text-field:focus-within + .class-target + .another-target {
display: block;
}通过合理运用 :focus-within 与兄弟选择器，你能在零 JavaScript 的前提下，优雅解耦复杂 DOM 结构中的交互逻辑——既保持代码简洁，又提升可维护性与可访问性。
