本文介绍如何仅使用纯 css，在深层嵌套的 input 获得焦点时，控制其外部独立 div 的显隐状态，无需 javascript，核心依赖 `:focus-within` 伪类与相邻兄弟选择器。
在现代前端开发中，常需实现“输入框聚焦时显示提示层、操作栏或辅助面板”这类交互效果。若目标元素（如 .class-target）与 <input> 不在同一 DOM 层级，甚至被多层容器包裹，传统 :focus 无法跨层级影响外部元素——此时，:focus-within 是最简洁、语义清晰且纯 CSS 的解决方案。
:focus-within 是一个父级伪类：当该元素自身获得焦点，或其任意后代元素获得焦点时，该选择器即匹配成功。它完美适用于本例中 input 深度嵌套于 .v-text-field 内部的结构。
关键在于选择器逻辑的修正：
❌ 错误写法（原文中）：
.v-text-field input:focus-within > .class-target { /* 无效：input 上不能用 :focus-within，且 > 要求直接子元素，但 .class-target 并非 input 的子元素 */ }✅ 正确写法（答案提供）：
.v-text-field:focus-within + .class-target {
display: block;
}
.class-target {
display: none;
/* 推荐添加基础样式以确保视觉可见性 */
width: 100px;
height: 40px;
padding: 8px;
background-color: #f0f8ff;
border: 1px solid #4285f4;
border-radius: 4px;
}该规则含义为：当 .v-text-field 元素（含其内部任意后代，包括 <input>）获得焦点时，紧邻其后的兄弟元素 .class-target 显示；否则保持默认 display: none。
立即学习“前端免费学习笔记（深入）”；
HTML 结构必须满足 相邻兄弟关系（+ 选择器要求）：
<!-- ✅ 正确：.class-target 紧跟在 .v-text-field 后 --> <div class="v-input custom-search input-small v-text-field"> <!-- ... 多层嵌套 input --> </div> <div class="class-target">Target</div>
⚠️ 注意事项：
- 若 .class-target 不是 .v-text-field 的直接下一个兄弟元素（中间存在其他标签），请改用通用兄弟选择器 ~，但需注意它会匹配所有后续同级 .class-target，可能引发意外显示；
- :focus-within 兼容性良好（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+），如需支持旧版 IE，需降级为 JavaScript 方案；
- 避免对 .class-target 使用 visibility: hidden 或 opacity: 0 替代 display: none —— 因为 display 切换会触发布局重排，而 visibility/opacity 不会响应 :focus-within 的显隐控制逻辑（除非配合 transition 做渐变，但需额外处理）；
- 如需动画效果，可结合 transition 对 opacity 和 transform 进行过渡（注意：display 无法过渡，需搭配 max-height 或 height 模拟）。
总结：仅靠一行关键 CSS（.v-text-field:focus-within + .class-target { display: block; }），即可优雅解耦 DOM 深度与交互逻辑，是现代 CSS 布局与交互设计的典型实践。
