CSS嵌套选择器中末尾`&`的含义及多层嵌套行为解析

核心定义 #

&是CSS嵌套选择器中的上下文引用符号，它代表当前嵌套层级的完整选择器序列，而非单一的父选择器。W3C文档中提到的“等价于:is()”是指其底层匹配逻辑（匹配上下文选择器对应的所有元素），而非字面的替换规则——实际替换时会完整保留上下文选择器的结构。

示例1：&作为独立选择器被前置 #

嵌套代码：

.card {
  /* .card 样式 */
  .featured & {
    /* .featured .card 样式 */
  }
}

编译后代码：

.card {
  /* .card 样式 */
}

.featured .card {
  /* .featured .card 样式 */
}

解析：
这里的&直接引用父级的完整选择器.card。.featured与&之间的空格表示后代选择器关系，因此编译后为.featured .card，即匹配.featured元素的后代中带有.card类的元素。

示例2：多层嵌套下的&继承规则 #

嵌套代码：

.card {
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  & h2 {
    /* 等价于 .card h2 */
    color: slateblue;
    .featured & {
      /* 等价于 .featured.card h2 */
      color: tomato;
    }
  }
}

分步解析：

1. 第一层嵌套& h2：&引用直接父级的选择器.card，替换后得到.card h2，匹配.card元素的后代h2标签。
2. 第二层嵌套.featured &：此时&引用的是当前上下文的完整选择器序列——也就是上层的.card h2，而非单独的.card。由于.featured与&之间没有空格，会将.featured作为类选择器合并到&序列的第一个选择器上，最终得到.featured.card h2，即匹配同时带有.card和.featured类的元素的后代h2标签。

关键细节：空格对&行为的影响 #

• &左侧的空格：直接决定选择器的组合关系：
  • 带空格：前置选择器与&代表的选择器链为后代/相邻等组合关系（如示例1的.featured &）
  • 无空格：前置选择器与&代表的选择器链的第一个选择器合并为复合选择器（如示例2的.featured &）
• &右侧的空格：仅作为选择器的分隔符，移除后会导致后续选择器与&代表的选择器链合并为单一选择器（如&h2会被解析为.cardh2，而非.card h2），你测试中提到的“右侧空格移除无影响”可能是测试场景的特殊情况，实际标准下会改变选择器结构。

总结 #

&的核心行为可归纳为：

1. 始终代表当前嵌套层级的完整选择器链，而非仅直接父选择器
2. 前置选择器与&的空格决定组合方式：空格为后代关系，无空格为复合选择器合并
3. 多层嵌套时，&会逐层继承上层的选择器链，形成完整的选择器序列

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