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

你需要的是同时满足两个包含条件的选择器，而:has(h2, .subtitle)是“包含h2 或 .subtitle”的逻辑，要实现“且”的逻辑，只需要把两个条件拆分成独立的:has()伪类链式使用即可：

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

对应的HTML示例：

<section> <!-- 会匹配 -->
  <h2>Header text</h2>
  <div class="subtitle"></div>
</section>

<section> <!-- 不会匹配 -->
  <h2>Header text</h2>
</section>

<section> <!-- 不会匹配 -->
  <div class="subtitle"></div>
</section>

原理说明 #

CSS的伪类是逻辑与的关系，当你给同一个选择器叠加多个:has()时，只有同时满足所有:has()内的条件，该元素才会被选中。这里第一个:has(h2)确保section包含h2元素，第二个:has(.subtitle)确保section包含带.subtitle类的元素，两者同时满足时才会应用样式。

内容的提问来源于stack exchange，提问作者Stevoisiak