如何用 CSS 选择同时包含两种指定子元素的元素？

2026-11-04数据小许

在同一个 section 选择器后连续写两个 :has()，让两个条件同时成立：

section:has(h2):has(.subtitle) {
  background: #F00;
}

这个选择器会匹配示例中的第一个 <section>。第二个缺少 .subtitle 元素，因此不会匹配。

为什么逗号不能表达“同时包含”？

同一个 :has() 内的逗号表示备选条件：

section:has(h2, .subtitle)

只要 section 内有 h2 或 .subtitle，选择器就会匹配。

拆成两个连续的 :has()，就要求同一个 section 同时满足以下条件：

:has(h2)：存在 h2 后代元素。
:has(.subtitle)：存在带有 .subtitle 类的后代元素。

两个 :has() 之间不要加空格，否则会引入后代关系，改变选择器的含义。

完整示例

<style>
  section:has(h2):has(.subtitle) {
    background: #F00;
  }
</style>

<!-- 匹配：两个条件都满足 -->
<section>
  <h2>Header text</h2>
  <div class="subtitle"></div>
</section>

<!-- 不匹配：缺少 .subtitle -->
<section>
  <h2>Header text</h2>
</section>

如果只允许直接子元素

section:has(h2):has(.subtitle) 会检查任意层级的后代元素。要限定 h2 和 .subtitle 都是 section 的直接子元素，需要分别加上 >：

section:has(> h2):has(> .subtitle) {
  background: #F00;
}

例如，下面的结构符合后代元素版本，但不符合直接子元素版本，因为 h2 位于内层 div 中：

<section>
  <div>
    <h2>Header text</h2>
  </div>
  <div class="subtitle"></div>
</section>

是否必须是两个不同的元素？

串联的 :has() 要求两个条件同时成立，但不保证它们由不同的元素满足。例如，仅包含 <h2 class="subtitle">Header text</h2> 的 section 也会匹配，因为这个 h2 同时符合两个选择器。

对于题目给出的 h2 和独立的 .subtitle 元素，使用 section:has(h2):has(.subtitle) 即可。