这个 CSS :is() 选择器没有像我想象的那样工作

Question

为什么 CSS 选择器

.a ~ .b :is(body .b .c .d)

与以下简单 HTML 标记中的

.d

匹配，而第一个

.b

和

:is()

之间的空格肯定是后代组合器，因此选择器应该尝试选择任何符合条件的

.d

是

.c

的后代，而

.b

又是

body

的后代，而

.b

和

:is

之间有空格）是任何

.b

的后代

.a

的以下兄弟姐妹？

body

不是

.b

的后代，但已选择

.d

并且

.d

的背景颜色设置为黄绿色。

我认为

:is()

或

:where()

中的选择器列表是相对的，如果它以组合器开头（例如

+

、

>

、

~

），否则它会被赋予隐含的后代组合器。所以

body .b .c .d

仅当它们是 .b 的

后代

时才应该匹配，但它们不是（

.c .d

是但不是

.b .c .d

也不是

body .b .c .d

）

<div class="a"></div>
<div class="b">
  <div class="c">
    <div class="d"></div>
    </div>
</div>

.a {--bc: red;}
.b {--bc: green;}
.c {--bc: blue;}
.d {--bc: orange;}

:is(.a,.b,.c,.d) {
  aspect-ratio:1;
  border: 3px solid var(--bc);
  margin: 20px;
  width: 100px;
}

.a ~ .b :is(body .b .c .d) /* this colours .d but why? */
/* .a ~ .b :is(.b .c .d) -- so does this */
{
  background-color: chartreuse;
}

我尝试了上面的 HTML 和 CSS，并期望

.d

不会被选中，但事实是它已经把“我认为 CSS 是如何工作的”从我下面拉了下来。

注意：我知道

:is

对于只有一个选择器列表来说是不必要的，最初开始我研究这个问题的CSS确实在

:is()

内有多个选择器列表，但首先我需要了解发生了什么在我开始添加更多选择器之前就只有这个。

Answer 1

您对

:is()

的理解并非100%正确。

.a ~ .b :is(body .b .c .d)

表示选择与选择器匹配的任何元素

.a ~ .b *

并且还匹配选择器

body .b .c .d

:is()

内部的内容与外部没有任何关系，这是每个人都会犯的常见错误，因为您将选择器视为：

.a ~ .b :body .b .c .d

但事实并非如此。

因此，您将选择作为

.d

的后代且也是

.b

 的后代的任何 

body .b .c

元素