本文介绍如何仅用纯 css 实现：当深层嵌套的 `` 获得焦点时，自动显示其外部（非父级）的指定 `
`；失焦时则隐藏——关键在于正确使用 `:focus-within` 伪类与相邻兄弟选择器（`+`），无需 javascript。
在实际开发中（尤其是使用 vuetify 等 ui 框架时），表单控件结构往往高度封装， 可能深藏于多层
内部，无法通过常规父子关系选择器（如 > 或 ~）直接控制外部元素。此时，:focus-within 是解决该问题的理想方案。
✅ 正确原理：:focus-within 作用于包含聚焦元素的祖先容器
:focus-within 并非作用于 本身，而是匹配自身或其任意后代获得焦点的元素。因此，应将其应用于 的最近公共祖先容器（如 .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 的紧邻兄弟元素（即同级、且紧跟其后），才能被 + 选择器精准捕获：
Target⚠️ 注意事项与常见误区
- 不要写成 input:focus-within > .class-target：:focus-within 不适用于 自身（它无子元素），且 > 要求 .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 结构中的交互逻辑——既保持代码简洁，又提升可维护性与可访问性。