17370845950

本文介绍如何仅用纯 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 结构中的交互逻辑——既保持代码简洁，又提升可维护性与可访问性。