我想创建一个CSS选择器，用来匹配一个同时包含两种指定匹配子元素的元素。举例来说，假设我想匹配一个 <section> 元素，该元素同时包含一个 <h2> 元素，以及一个具有 .subtitle 类的元素。

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

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

<section> <!-- Don't match -->
  <h2>Header text</h2>
</section>

我知道 :has() 可以选择包含元素，但指定两个选择器会使它选择包含这两种匹配元素中的任意一个的元素，而不是同时包含两者。

如何仅在一个元素同时包含这两种匹配元素时才对其进行选择？

解决方案

在这里，链式使用 :has 是实现这一点的最佳方案：

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

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

<section> <!-- Doesn't match -->
    <h2>Header text</h2> 
</section>