CSS :has() 选择器详解 – wiki基地

---

CSS :has() 选择器详解：告别“父级选择器缺失”的时代，拥抱更强大的关系选择

在 CSS 的世界里，我们长期以来习惯了“由上往下”的选择模式：我们可以轻松地选择一个父元素内的子元素或后代元素（例如 div p 选择 div 里的所有 p 元素，ul > li 选择 ul 的直接子元素 li）。然而，CSS 却一直缺乏一种核心能力：根据子元素或后代元素的存在、状态或特性来选择它们的父元素或祖先元素。开发者们戏称这是 CSS 的“父级选择器缺失”问题。

直到 :has() 伪类选择器的出现，这一局面被彻底改变。:has() 不仅仅是一个“父级选择器”，它是一个更通用的“关系型伪类选择器”，它能够检查一个元素内部（包括其子孙后代甚至兄弟元素）是否存在匹配特定相对选择器列表的元素，并据此选中该元素本身。这带来了前所未有的灵活性和强大的样式控制能力。

本文将带你深入了解 CSS :has() 选择器的一切，包括其语法、工作原理、核心用例、注意事项以及浏览器兼容性。

1. 什么是 :has() 选择器？

:has() 是一个功能性伪类（functional pseudo-class），它属于 CSS Selectors Level 4 规范的一部分。它的核心作用是测试当前元素（也就是应用 :has() 的元素）是否包含（或更准确地说，其内部或兄弟方向上是否存在）符合指定相对选择器列表的元素。如果测试通过，那么当前元素就会被选中。

你可以将 :has() 理解为：“选择那些内部或某个方向上满足指定条件的元素”。

它通常被非正式地称为“父级选择器”或“关系选择器”，因为它最常被用来实现根据子元素选择父元素的功能。

2. :has() 的语法

:has() 的基本语法如下：

css
SubjectSelector:has(RelativeSelectorList) {
/* 样式规则 */
}

• SubjectSelector (主体选择器): 这是你想要应用样式的那个元素的选择器。:has() 伪类是附加在这个选择器后面的。浏览器会首先尝试匹配这个 SubjectSelector。
• :has(...): 这是伪类本身。
• RelativeSelectorList (相对选择器列表): 这是 :has() 括号内的内容。它是一个或多个用逗号分隔的相对选择器。这些相对选择器会相对于 SubjectSelector 来测试其内部或兄弟元素。

工作原理分解：

1. 浏览器找到所有匹配 SubjectSelector 的元素。
2. 对于每一个匹配的 SubjectSelector 元素，浏览器会检查它的内部（后代元素）或紧随其后/后面的兄弟元素，看是否存在能匹配 RelativeSelectorList 中任何一个选择器的元素。
3. 如果对于一个 SubjectSelector 元素，在其内部或兄弟方向上找到了至少一个匹配 RelativeSelectorList 的元素，那么这个 SubjectSelector 元素就被 :has() 选中了，然后应用相应的样式规则。

RelativeSelectorList 可以包含哪些？

RelativeSelectorList 中的选择器是相对于 SubjectSelector 来评估的。它可以包含：

• 后代选择器 ( 空格): 例如 :has(img) 会检查 SubjectSelector 元素的任何后代是否是 <img> 元素。
• 子代选择器 (>): 例如 :has(> .child) 会检查 SubjectSelector 的直接子元素中是否有类名为 .child 的元素。
• 相邻兄弟选择器 (+): 例如 :has(+ .sibling) 会检查 SubjectSelector 元素紧随其后的兄弟元素是否是类名为 .sibling 的元素。注意： 这里的 SubjectSelector 必须能够有兄弟元素。如果你在 body 上使用 :has(+ div) 显然是没意义的。更常见的用法是将 :has(+ .sibling) 放在一个父元素上，然后测试父元素内部的某个元素后面是否有特定的兄弟。例如 div:has(p + span) 表示选择包含一个 p 后面紧跟着 span 的 div。或者在选择兄弟元素本身时使用，如 .item:has(+ .active)，但此时 SubjectSelector 就是.item，它后面需要有一个.active兄弟才能选中.item。
• 通用兄弟选择器 (~): 例如 :has(~ .sibling) 会检查 SubjectSelector 元素后面的任何兄弟元素中是否有类名为 .sibling 的元素。
• 其他伪类/伪元素/属性选择器等的组合： RelativeSelectorList 可以包含任意复杂的选择器组合，只要它们是相对于 SubjectSelector 评估的。例如 :has(> input:checked + span) 会检查 SubjectSelector 是否有一个直接子元素 input:checked，且这个 input:checked 后面紧跟着一个 span 兄弟元素。

RelativeSelectorList 不能包含哪些？

• 伪元素 (::before, ::after, ::marker, etc.): 你不能在 :has() 内部测试伪元素。例如 :has(::before) 是无效的。
• 某些伪类: 例如 :visited 在 :has() 内部是无效的，以避免泄露用户历史信息。
• RelativeSelectorList 自身不能直接包含另一个 :has() 作为顶级项（但可以在更复杂的选择器组合内部出现，只要逻辑上不构成无限循环或歧义）。

逗号分隔的列表：

RelativeSelectorList 可以包含多个用逗号分隔的选择器，这表示逻辑上的“或”关系。例如：

css
.container:has(.image, .video) {
/* 选择包含 .image 或 .video 子元素的 .container */
}

3. 为什么 :has() 如此重要？

:has() 伪类填补了 CSS 选择能力的一个巨大空白，其重要性体现在以下几个方面：

• 实现真正的“父级选择”： 这是最直接也是最期待的功能。现在我们可以根据子元素的状态（例如 :checked, :invalid, :focus）、数量（例如 :first-child, :last-child, :only-child）或是否存在特定子元素来样式化父元素。
• 增强兄弟元素间的样式控制： 结合兄弟选择器 (+, ~) 和 :has()，可以在不依赖特定顺序或在父元素上添加额外类的情况下，根据一个兄弟元素的状态来样式化另一个兄弟元素。
• 减少对 JavaScript 的依赖： 许多之前需要通过 JavaScript 检测元素状态并添加/移除类来实现的样式效果，现在可以直接用 CSS 完成，简化了代码并提高了性能。
• 更简洁、更语义化的 HTML： 有时为了通过 CSS 选择父元素，我们不得不在 HTML 中添加额外的包装元素或类。:has() 的出现允许我们编写更简洁、更符合内容结构的 HTML，将样式逻辑更多地交给 CSS 处理。
• 提升组件的可重用性： 组件的样式可以更灵活地根据其内部内容的构成来调整，而无需外部容器提供额外的上下文类。

4. 核心用例与详细示例

以下是一些常见的 :has() 使用场景及其代码示例：

用例 1: 根据子元素的存在或状态选择父元素

这是 :has() 最经典的应用。

• 示例 1.1：容器内有图片时，给容器添加边框

  “`html

  产品标题

  产品描述…

  

  另一产品

  这个产品没有图片。

  “`

  “`css
  / 默认卡片样式 /
  .card {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
  }

  / 如果 .card 包含一个 img 元素，则添加蓝色边框 /
  .card:has(img) {
  border-color: blue;
  box-shadow: 2px 2px 5px rgba(0, 0, 255, 0.2);
  }
  “`

  解释： .card:has(img) 选择所有类名为 card 的元素，并且这些 card 元素内部（后代）包含至少一个 img 元素。第一个卡片会匹配并获得蓝色边框，第二个卡片则不会。

• 示例 1.2：表单字段无效时，高亮其父级容器

  这对于提升用户体验、明确指出哪个区域有问题非常有帮助。

  “`html

  邮箱:
  
  请输入有效的邮箱地址。
  姓名:
  

  “`

  “`css
  / 默认表单组样式 /
  .form-group {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid transparent; / 默认透明边框 /
  }

  / 如果 .form-group 包含一个无效的 input 元素，则高亮容器 /
  .form-group:has(input:invalid) {
  border-color: red;
  background-color: #fee; / 浅红色背景 /
  }

  / 可选：只在 input 无效时显示错误信息 /
  .form-group .error-message {
  display: none;
  color: red;
  font-size: 0.9em;
  }

  / 如果 .form-group 包含一个无效的 input 元素，且包含 .error-message，则显示错误信息 /
  .form-group:has(input:invalid) .error-message {
  display: block;
  }
  “`

  解释： .form-group:has(input:invalid) 选中所有类名为 form-group 的元素，前提是这些元素内部包含一个处于 :invalid 状态的 input 元素。当用户输入无效或未填写必填字段时，相应的 .form-group 将被选中并应用红色边框和浅红色背景。第二个规则则演示了如何在父容器被 :has() 选中时，同时控制其内部其他元素的样式（例如显示错误信息）。

• 示例 1.3：列表非空时，给列表添加特定样式

  “`html

  待办事项

  • 完成报告
  • 发送邮件

  已完成事项

  “`

  “`css
  / 默认 widget 样式 /
  .widget {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 20px;
  }

  / 如果 .widget 包含一个非空的 ul (即 ul 包含 li)，给 widget 底部加边框 /
  .widget:has(ul:not(:empty)) {
  border-bottom-width: 3px;
  border-bottom-color: #007bff;
  }

  / 或者：如果 ul 包含至少一个 li /
  .widget:has(ul:has(li)) { / 嵌套 has 也可以，但这里的第二个 :has(li) 是针对 ul 的，也可以直接 ul:not(:empty) /
  / … 样式 /
  }

  / 更直接且常用的方法：如果 widget 包含 ul 且 ul 里有 li /
  .widget:has(ul li) {
  / … 样式 /
  }
  “`

  解释： .widget:has(ul:not(:empty)) 选中包含一个非空 ul 元素的 .widget。:not(:empty) 伪类选择不包含任何子元素（或文本节点）的元素，所以 :not(:empty) 选择非空元素。或者使用 .widget:has(ul li) 选中包含一个 ul 且该 ul 内部有 li 的 .widget。第一个 widget 会匹配并获得底部边框，第二个则不会。

用例 2: 根据兄弟元素选择元素

:has() 结合兄弟选择器 (+, ~) 可以非常强大。但要注意，:has() 是应用在 主体选择器 上的，测试的是主体选择器的 相对 元素。所以常见的模式是将 :has() 放在一个共同的祖先元素或某个兄弟元素上，然后利用里面的相对选择器去定位另一个兄弟元素。

• 示例 2.1：当某个元素后面紧跟着一个特定类名的兄弟时，样式化这个元素

  html
<div class="item">普通项目</div>
<div class="item active">激活项目</div>
<div class="item">普通项目</div>

  css
/* 如果一个 .item 后面紧跟着一个 .active 兄弟，给它一个右边框 */
.item:has(+ .active) {
border-right: 2px solid green;
margin-right: 10px; /* 添加一些间距避免边框重叠 */
}

  解释： .item:has(+ .active) 选择所有类名为 item 的元素，并且这些 item 元素的紧邻的下一个兄弟元素是类名为 active 的。在这个例子中，第一个 .item 后面跟着 .active，所以第一个 .item 会被选中并获得右边框。第二个 .item.active 后面跟着第三个 .item，不匹配条件，所以第二个 .item 不会被选中。第三个 .item 后面没有兄弟元素，也不会被选中。

• 示例 2.2：当一个元素后面任何位置有特定兄弟元素时，样式化这个元素

  html
<div class="step">步骤 1</div>
<div class="step">步骤 2</div>
<div class="step current">当前步骤 3</div>
<div class="step">步骤 4</div>
<div class="step">步骤 5</div>

  css
/* 如果一个 .step 后面任何位置有一个 .current 兄弟，给这个 .step 添加“已完成”样式 */
.step:has(~ .current) {
color: green;
font-weight: bold;
}

  解释： .step:has(~ .current) 选择所有类名为 step 的元素，并且这些 step 元素后面的任何兄弟元素中包含一个类名为 current 的。在这个例子中，步骤 1 和步骤 2 后面都有 .current 兄弟（步骤 3），所以它们会被选中并变成绿色粗体。步骤 3 和步骤 4 后面没有 .current 兄弟，所以它们不会被选中。

• 示例 2.3：在一个共同父元素下，根据兄弟元素的存在来样式化另一个元素

  “`html

  
  

  “`

  “`css
  / 如果 .layout-container 包含 .sidebar，那么让 .content 的左边距偏移 /
  .layout-container:has(.sidebar) .content {
  margin-left: 250px; / 假设 sidebar 宽度 250px /
  }

  / 如果 .layout-container 没有 .sidebar，那么让 .content 居中或占满宽度 /
  .layout-container:not(:has(.sidebar)) .content {
  width: 100%; / 或其他布局调整 /
  margin-left: 0;
  text-align: center;
  }
  “`

  解释： 第一个规则 .layout-container:has(.sidebar) .content 选择包含 .sidebar 子元素的 .layout-container，然后从这些被选中的容器中选择 .content 子元素。第一个容器包含 .sidebar，所以其内部的 .content 会被选中并应用左边距。第二个容器没有 .sidebar，所以其内部的 .content 不会匹配这条规则。第二个规则 .layout-container:not(:has(.sidebar)) .content 则相反，选择不包含 .sidebar 的 .layout-container，并对其内部的 .content 应用样式。

用例 3: 复杂的组合选择

:has() 可以与其他选择器和伪类结合，实现非常复杂的选择逻辑。

• 示例 3.1：选择所有没有特定子元素的容器

  “`html

  “`

  css
/* 如果 .product-list 没有子元素 .product，则显示“无产品”消息 */
.product-list:not(:has(.product))::after {
content: "当前没有产品可显示。";
display: block;
text-align: center;
color: #888;
margin-top: 20px;
}

  解释： .product-list:not(:has(.product)) 结合了 :not() 伪类。它选择所有类名为 product-list 的元素，但排除那些内部包含 .product 子元素的。然后对这些被选中的空（或不包含 .product）的列表容器添加一个伪元素显示提示信息。

• 示例 3.2：选择同时包含多种特定子元素的容器

  “`html

  标题

  段落

  
  

  标题

  段落

  

  “`

  css
/* 选择既包含 img 又包含 video 的 .article */
.article:has(img):has(video) {
border: 3px dashed purple;
}

  解释： 可以链式使用 :has()。.article:has(img):has(video) 要求 .article 元素首先通过 .article:has(img) 测试（包含 img），然后在通过测试的元素中再次通过 :has(video) 测试（包含 video）。只有同时满足这两个条件的 .article 元素才会被选中。第一个 .article 既有 img 又有 video，会被选中。第二个 .article 只有 img，不会被选中。

5. 语法细节与注意事项

• RelativeSelectorList 的范围： 记住 :has() 内部的相对选择器是相对于 SubjectSelector 的。它通常检查 SubjectSelector 的后代或后面的兄弟。它不能用来选择 SubjectSelector 的父元素或前面的兄弟元素。
• 伪元素无效： RelativeSelectorList 中不能使用伪元素（::before, ::after 等）。:has(::before) 是无效语法。
• :has() 内部的某些伪类限制： 出于安全和隐私原因，:has() 内部不能使用 :visited。
• 性能： 尽管现代浏览器对 :has() 进行了优化，但在非常大的文档树上使用复杂或通用的 :has() 选择器（例如 *:has(...)）可能会对性能产生影响，因为它可能需要浏览器检查更多的元素。但在大多数常见用例中（例如 .card:has(img)），性能开销是可以忽略不计的。如果遇到性能问题，应进行性能分析而非盲目避免使用 :has()。
• 可读性： 复杂的 :has() 选择器可能会降低 CSS 的可读性。合理地组织和注释你的 CSS 代码非常重要。

6. 浏览器兼容性

:has() 选择器是一项相对较新的特性，但主流现代浏览器的支持正在快速普及。

• 截至本文撰写时 (2023-2024 年)，Chromium 内核的浏览器 (Chrome, Edge, Opera) 以及 Safari 已经提供了稳定的支持。
• Firefox 在其开发版本中已实现 :has()，并在近期版本中逐渐默认开启或稳定支持。
• 建议在使用前查阅 caniuse.com 获取最新的详细兼容性信息。对于不支持 :has() 的浏览器，相关的样式规则将被简单地忽略。

7. 总结

CSS :has() 选择器是现代 CSS 中一个极其重要的补充，它打破了传统选择器的限制，赋予了我们根据元素之间的关系（特别是子元素或兄弟元素的状态/存在）来样式化父元素或其他相关元素的能力。

:has() 的出现极大地增强了 CSS 的表达能力，使得许多过去依赖 JavaScript 或额外 HTML 结构的样式需求得以纯粹通过 CSS 实现。这不仅简化了代码，提高了维护性，也让我们的 HTML 结构更加语义化。

从简单的“父级选择”到复杂的条件组合，:has() 开辟了新的可能性。随着浏览器兼容性的不断提升，它必将成为前端开发者工具箱中不可或缺的一部分。大胆尝试、探索和在实践中应用 :has() 吧，你会发现它能解决很多你过去遇到的样式难题！

---