CSS :has() 选择器详解：为什么它是“父选择器”？如何实现真正的容器查询？

一、前言

在传统的 CSS 中，我们只能根据元素的自身属性、类名、ID 或其子元素/兄弟元素 来设置样式，却无法根据其父元素或后代元素的状态来改变自身样式。

直到 :has() 选择器的出现，这一局面被彻底改变。

:has() 被称为 "父选择器" 或 "容器选择器" ，是 CSS 选择器的一次革命性升级。它不仅让 CSS 拥有了更强的表达能力，还为 容器查询（Container Queries） 提供了重要支持。

本文将深入解析 :has() 的语法、用法与实战场景，带你掌握这一现代 CSS 强大特性。

二、什么是 :has() 选择器？

:has() 是一个 关系伪类选择器 （Relational Pseudo-class），用于匹配包含特定后代元素的父元素。

✅ 语法：

复制代码

parent:has(descendant) {
  /* 样式规则 */
}

🔍 简单理解：

"选择那些包含某个特定后代元素的父元素"。

三、基本语法与示例

1. 基础用法：匹配包含特定子元素的父级

复制代码

<div class="card">
  <h3>标题</h3>
  <p>这是一段描述文字。</p>
</div>

<div class="card">
  <h3>标题</h3>
  <!-- 没有 p 元素 -->
</div>

/* 只有包含 <p> 的 .card 才有边框阴影 */
.card:has(p) {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 8px;
}

2. 支持复杂选择器

复制代码

/* 包含 .error 类的表单 */
.form:has(.error) {
  border: 2px solid #e74c3c;
}

/* 包含图片的段落，增加行高 */
p:has(img) {
  line-height: 1.8;
}

/* 包含至少两个子项的列表 */
ul:has(li:nth-child(2)) {
  background: #f8f9fa;
}

四、为什么说 :has() 是"父选择器"？

在 CSS 历史上，一直无法直接选择"父元素"。例如：

"如何选中包含 <input type="text"> 的 <label>？"

过去只能通过 JavaScript 或调整 HTML 结构解决。

现在，:has() 让 CSS 原生支持"向上选择"：

复制代码

<label>
  用户名：
  <input type="text" name="username">
</label>

/* 选中包含 text input 的 label */
label:has(input[type="text"]) {
  font-weight: bold;
  color: #333;
}

✅ 这就是所谓的"父选择器"能力。

五、实战场景：真正的"容器查询"（Container Queries）

CSS 容器查询（@container）允许组件根据其容器大小 而非视口大小来响应。:has() 可与之结合，实现更智能的布局。

示例：卡片根据内容动态调整

复制代码

<div class="container" style="width: 300px;">
  <article class="card">
    <img src="image.jpg" alt="图片">
    <h3>带图片的卡片</h3>
    <p>这是一段描述。</p>
  </article>
</div>

<div class="container" style="width: 300px;">
  <article class="card">
    <h3>纯文本卡片</h3>
    <p>没有图片。</p>
  </article>
</div>

/* 启用容器查询 */
.container {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

/* 如果卡片包含图片，使用两行布局 */
.card:has(img) {
  grid-template-rows: auto 1fr;
}

/* 容器查询 + :has()：小容器中，有图片的卡片改为单列 */
@container (max-width: 320px) {
  .card:has(img) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }
}

✅ 组件真正实现了"内容感知"与"容器感知"。

六、高级用法与技巧

1. 多条件匹配（与逻辑）

复制代码

/* 同时包含 h2 和 .btn 的 header */
header:has(h2):has(.btn) {
  padding: 2rem;
  background: #e3f2fd;
}

2. 否定匹配（结合 :not()）

复制代码

/* 不包含图片的卡片 */
.card:not(:has(img)) {
  font-size: 1.1em;
}

3. 表格行高亮（悬停整行）

复制代码

/* 当 td 被悬停时，高亮其父 tr */
tr:has(td:hover) {
  background-color: #f5f5f5;
}

七、浏览器兼容性

浏览器	支持情况
Chrome	105+ ✅
Edge	105+ ✅
Safari	15.4+ ✅
Firefox	121+ ✅
iOS Safari	15.4+ ✅

📊 数据来源：Can I use :has()
⚠️ 注意：目前 IE 和旧版浏览器不支持，生产环境建议结合渐进增强策略使用。

八、与 JavaScript 的对比

过去类似功能需 JS 实现：

复制代码

document.querySelectorAll('.card').forEach(card => {
  if (card.querySelector('img')) {
    card.classList.add('has-image');
  }
});

:has() 的优势：

无需 JS，减少脚本依赖。
性能更高，由浏览器原生优化。
更简洁，样式逻辑集中在 CSS 中。

九、总结

:has() 选择器是 CSS 发展史上的里程碑特性：

✅ 实现了"父选择器"功能，打破 CSS 选择方向限制。
✅ 与容器查询结合，推动组件化、响应式设计进入新阶段。
✅ 减少对 JavaScript 的依赖，提升样式表达能力。