本文介绍如何仅使用纯 css 实现：当深层嵌套的 `` 获得焦点时，自动显示其后方同级的 `.class-target` 元素；失焦时则隐藏。核心在于正确运用 `:focus-within` 伪类与相邻兄弟选择器（`+`），无需 javascript。
在实际开发中（尤其是使用 Vuetify 等 UI 框架时），表单控件结构往往高度嵌套，<input> 可能深藏于多层 <div> 内部。此时若想通过 CSS 控制外部非父级元素（如紧邻的提示框、下拉面板等）的显隐，不能依赖 :focus 直接作用于 <input> 后再向上查找（CSS 无法“向上选择”），而应巧妙利用 :focus-within —— 它会匹配自身或任意后代获得焦点的元素。
✅ 正确思路是：
- 将 :focus-within 应用于包含 <input> 的最近公共容器（如 .v-text-field）；
- 使用 + 相邻兄弟选择器定位其后紧跟的 .class-target；
- 失焦时默认隐藏，聚焦时覆盖为 display: block（或其他可见样式）。
以下是可直接运行的完整示例：
<!-- 输入容器（含深层嵌套 input） -->
<div class="v-input custom-search input-small v-text-field">
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-text-field__slot">
<input id="input-17" type="text" placeholder="点击试试">
</div>
</div>
<div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper"></div>
</div>
</div>
</div>
</div>
<!-- 需要控制显隐的目标元素（必须紧邻 v-text-field） -->
<div class="class-target">Target —— 输入框聚焦时显示</div>/* 默认隐藏目标元素 */
.class-target {
display: none;
width: 200px;
height: 40px;
background: #e3f2fd;
border: 1px solid #2196f3;
border-radius: 4px;
padding: 8px 12px;
margin-top: 8px;
font-size: 14px;
}
/* 当 .v-text-field 或其任意后代（如 input）获得焦点时，显示紧邻的 .class-target */
.v-text-field:focus-within + .class-target {
display: block;
}⚠️ 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- .class-target 必须是 .v-text-field 的下一个相邻兄弟元素（即 HTML 中紧挨着写在后面），否则 + 选择器不生效；
- 若中间插入其他元素（如注释、空格 <div></div>），需改用通用兄弟选择器 ~，但会匹配所有后续同类元素，需谨慎；
- :focus-within 兼容性良好（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+），现代项目可放心使用；
- 避免误写为 input:focus-within > .class-target —— :focus-within 不适用于单个 <input>（它本身不包含后代），且 > 子选择器无法跨层级跳转到外部元素。
总结：纯 CSS 实现焦点联动显隐，核心在于「容器级聚焦检测 + 兄弟元素定位」。掌握 :focus-within 的语义和 + 选择器的约束条件，即可优雅解耦 DOM 结构与交互逻辑，提升代码可维护性与性能。
