嵌套在 :is 和 :where 伪类选择器中

Question

考虑以下 HTML 和 CSS 代码：

.main :is(section p) {
  background: darkcyan;
}

<section class="main">
  <p>Hello</p>
</section>

我希望不应选择该段落，因为

section

不是具有

.main

类的元素的后代。但是，该段落仍然被选中。

为什么该段落被选中？使用

:is()

选择器实现此行为的预期用例是什么？

Answer 1

让我们考虑一下您的整体选择器

.main :is(section p)

。

它试图选择一个

p

，它是一个部分的后代，该部分本身是具有

.main

类的元素的后代。

因此

p

will 会被选中，因为它是

.main

的后代并且 它是

section

的后代，所以“整个选择器中的两个`选择器都是正确的。