如何用CSS控制外部div在深层输入框聚焦/失焦时显隐

你的核心问题是CSS选择器使用错误，结合输入框嵌套多层的结构，正确实现方式如下：

问题分析 #

原CSS中.v-text-field input:focus-within > .class-target存在两处关键错误：

• :focus-within是作用在包含聚焦元素的父容器上的伪类，不能直接加在input元素本身
• .class-target是输入框外层容器的兄弟元素，不是input的子元素，无法用子选择器>匹配

正确实现代码 #

CSS部分

/* 初始状态隐藏目标div */
.class-target {
  display: none;
}

/* 当外层容器内的输入框聚焦时，显示其兄弟元素.class-target */
.v-text-field:focus-within + .class-target {
  display: block;
}

HTML部分（保留原有结构即可）

<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" value="">
      </div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages theme--light">
        <div class="v-messages__wrapper"></div>
      </div>
    </div>
  </div>
</div>

<div class="class-target">Target</div>

原理说明 #

• :focus-within伪类会匹配任何包含当前聚焦元素的父容器，即便输入框嵌套多层，只要给最外层的.v-text-field容器添加这个伪类，就能检测到内部输入框的聚焦状态
• 兄弟选择器+用来选中.v-text-field之后紧邻的.class-target元素；如果目标div不是紧邻的容器，可以用通用兄弟选择器~替代

内容的提问来源于stack exchange，提问作者frankfurt