为什么 :has 伪选择器不适用于元素列表？

Question

我有一个带有“help-image”类的 div 块，其中包含一个 ，位于带有“help-section”类的部分内。

按如下方式使用 :has 选择器效果很好：

section.help-section > div:has(img),
section.help-section > div:has(figure),
section.help-section > div:has(button)
{
    background: mistyrose;
}

但是，传递元素列表（正如 MDN 文档建议我可以的那样）根本不起作用：

section.help-section > div:has(img, button, figure)
{
    background: mistyrose;
}

我已经使用开发者工具检查了所有元素，如果我使用第二个示例，则该规则根本不会出现。

Answer 1

您可能正在寻找

:is()

CSS 选择器，以便

:has()

选择器适用于任何

img

、

button

或

figure

标签：

section.help-section > div:has(:is(img, button, figure))
{
    background: mistyrose;
}

<section class="help-section">
  <div class="help-section-content">
  
    <div class="help-image">
      <img src="https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/help/default/24px.svg"
           alt="Help icon" />
    </div>

    <p>This is the help section</p>
    
  </div>
</section>