是 :where 意味着折叠重复的选择器？

Question

鉴于此 html 和此 css:

<div id="outer">
  <p>text the first</p>
  <div id="inner">
    <p>text the second</p>
  </div>
</div>

div :where(div p, .whatever) { color: red; }

.. 然后根据 https://drafts.csswg.org/selectors/#zero-matches css 等价于¹ 到 ..

div div p, div .whatever { color: red; }

.. 所以只有“text the second”应该是红色的。

但是 .. 两个段落的样式都为 red²，就好像 css 实际上只是 div p, div .whatever { color: red; }.

我在 :where 和 :is 上阅读的每篇文章都没有提到这种行为。

这是怎么回事？³

¹ 当然，特异性较低。
² Chrome 版本 92.0.4515.131 (MacOS)，其他浏览器未测试。
³ 已经过了我的就寝时间，也许我忘记了如何阅读？

Answer 1

div :where(div p) 不等同于 div div p。一般来说，没有办法将使用 :is/:where 的选择器扩展为不使用 :is/:where 的等效单一选择器，但 div :where(div p) 特别是完全等同于 div p 作为至于它匹配哪些元素。

:where(div p) 匹配匹配 div p
div :where(div p) 匹配匹配 div p

div

“div 的后代匹配 div p”是“div 的后代是 div[=36 的后代” =] 匹配 p”

以上粗体部分多余

是 :where 意味着折叠重复的选择器？

is :where meant to collapse repeated selectors?

css

css-selectors