17370845950

本文介绍如何仅使用纯 css 实现：当深层嵌套的 `` 获得焦点时，自动显示其后方同级的 `.class-target` 元素；失焦时则隐藏。核心在于正确运用 `:focus-within` 伪类与相邻兄弟选择器（`+`），无需 javascript。

在实际开发中（尤其是使用 Vuetify 等 UI 框架时），表单控件结构往往高度嵌套， 可能深藏于多层

内部。此时若想通过 CSS 控制外部非父级元素（如紧邻的提示框、下拉面板等）的显隐，不能依赖 :focus 直接作用于 后再向上查找（CSS 无法“向上选择”），而应巧妙利用 :focus-within —— 它会匹配自身或任意后代获得焦点的元素。

✅ 正确思路是：

• 将 :focus-within 应用于包含 的最近公共容器（如 .v-text-field）；
• 使用 + 相邻兄弟选择器定位其后紧跟的 .class-target；
• 失焦时默认隐藏，聚焦时覆盖为 display: block（或其他可见样式）。

以下是可直接运行的完整示例：

  
    
      
        
      
    
    
      
        
      
    
  



Target —— 输入框聚焦时显示

/* 默认隐藏目标元素 */
.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 中紧挨着写在后面），否则 + 选择器不生效；
• 若中间插入其他元素（如注释、空格 ），需改用通用兄弟选择器 ~，但会匹配所有后续同类元素，需谨慎；
• :focus-within 兼容性良好（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+），现代项目可放心使用；
• 避免误写为 input:focus-within > .class-target —— :focus-within 不适用于单个 （它本身不包含后代），且 > 子选择器无法跨层级跳转到外部元素。

总结：纯 CSS 实现焦点联动显隐，核心在于「容器级聚焦检测 + 兄弟元素定位」。掌握 :focus-within 的语义和 + 选择器的约束条件，即可优雅解耦 DOM 结构与交互逻辑，提升代码可维护性与性能。