如何使用 CSS :has() 选择器精准匹配嵌套在兄弟容器中的聚焦元素

在复杂页面布局中，我们经常会遇到这样的需求：当某个容器里的输入框获得焦点时，希望改变另一个兄弟容器里元素的样式。过去只能依赖 JavaScript 监听事件，现在利用 CSS :has() 选择器就能纯样式实现。下面先通过示例结构了解具体做法。

理解需求与 DOM 结构

假设页面中有两个并列的容器，一个是表单区，另一个是提示区。当表单区的输入框聚焦时，提示区需要高亮。这种场景的关键是：从兄弟容器出发，通过 :has() 检查另一方是否包含 :focus 元素。

<div class="wrap">
  <div class="form-box">
    <input type="text" placeholder="输入内容" />
  </div>
  <div class="tip-box">
    <span>请在左侧输入</span>
  </div>
</div>

使用 :has() 匹配兄弟中的聚焦元素

我们可以用 .wrap:has(.form-box input:focus) 来表示：当 wrap 内部存在聚焦的输入框时，命中该规则。然后在其中选中 .tip-box 改变样式。

.wrap:has(.form-box input:focus) .tip-box {
  background: #e6f7ff;
  border-color: #1890ff;
}

.tip-box {
  border: 1px solid #d9d9d9;
  padding: 8px;
}

为什么能精准匹配

:has() 本身是一个关系型伪类，它允许选择器根据后代或特定关系内的元素状态做判断。因为 .form-box 和 .tip-box 是同属 .wrap 的兄弟，所以通过父级 :has() 间接选中兄弟内部元素，不会误伤其他结构。

多层嵌套场景

如果输入框被更深地嵌套，例如放在 label 中，只要选择器路径写对，同样适用。

<div class="wrap">
  <div class="form-box">
    <label>
      名称：
      <input type="text" />
    </label>
  </div>
  <div class="tip-box"><span>提示信息</span></div>
</div>

.wrap:has(.form-box label input:focus) .tip-box {
  color: #1890ff;
  font-weight: bold;
}

兼容性注意事项

• 现代浏览器已支持 :has()，但老旧版本可能不生效。
• 建议将关键交互保留 JS 兜底，纯视觉反馈使用 :has() 即可。
• 避免在选择器中写过长链条，影响可读性。

小结

通过父容器加 :has() 配合 :focus，我们可以精准匹配嵌套在兄弟容器中的聚焦元素，并控制其样式。这种方式减少了脚本依赖，使样式逻辑更直观，适合表单联动、卡片高亮等常见交互。

CSShas_selectorfocus兄弟选择器嵌套匹配修改时间：2026-07-25 00:33:19