CSS :is()选择器匹配不符合预期？求解析其匹配逻辑

核心逻辑拆解 #

整个选择器的匹配是两层条件的交集：

1. 元素必须是.a的后续兄弟.b的后代（由.a ~ .b + 空格后代组合器定义）
2. 元素必须满足:is()括号内任意一个完整选择器的匹配（这里是body .b .c .d）

你的误解点 #

你错误认为:is()内部的选择器会相对外层的.a ~ .b做上下文限制，但实际上：

• :is()仅对括号内的选择器列表做“或运算”匹配，内部每个选择器都是基于整个文档根节点的绝对选择，不会自动和外层选择器绑定相对上下文。
• 不存在“不以组合器开头就添加隐含后代组合器”的规则，:is()内的选择器和单独写在样式里的行为完全一致。

具体到示例的匹配过程 #

目标.d同时满足两个条件：

• 它是.a ~ .b的后代（位于该.b的子树中）
• 它完全符合body .b .c .d的匹配规则（确实是<body>下.b→.c→.d的层级结构）

因此两个条件同时成立，.d被选中并应用背景色。

同样，.a ~ .b :is(.b .c .d)能选中的原因也是如此：目标.d既是.a ~ .b的后代，又满足.b .c .d的绝对匹配（它本身就是某个.b的后代.c的后代.d）。

验证代码 #

HTML代码：

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

CSS代码：

.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) /* 匹配目标.d */
/* .a ~ .b :is(.b .c .d) -- 同样匹配 */
{
  background-color: chartreuse;
}

补充说明 #

如果你想实现“.a ~ .b的后代中，同时是该.b下.c的后代.d”的匹配，应该写成：

.a ~ .b .c .d
/* 或者用:is()包裹内部的选择器片段（如果需要多选择器）： */
.a ~ .b :is(.c .d)

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