Native CSS嵌套规则疑问：MDN示例中选择器等价关系解析

首先明确核心：&在CSS嵌套里是当前嵌套上下文的完整选择器占位符，不是仅指“父选择器”，而是从外层到当前嵌套上一级的所有选择器的组合。

你疑惑的MDN示例，对应的嵌套代码应该是类似这样的：

.card {
  h2 {
    .featured & {
      /* 注释：等价于 .featured .card h2 */
      color: orange;
    }
  }
}

这里的&代表的是它的直接父级完整选择器——.card h2，所以.featured &会被替换成.featured .card h2，这是一个后代选择器，意思是：只要.card h2是.featured元素的后代（不管.card是.featured的子元素、孙子元素，甚至更深层级），这个样式就会生效。

你之前误以为的.featured.card h2是交集选择器，指的是同时带有.featured和.card类的同一个元素内部的h2，这和后代选择器的逻辑完全不同：

• 交集选择器.a.b：匹配同时有a和b类的同一个元素
• 后代选择器.a .b：匹配a元素内部所有的b元素（不管层级）

再用一个多层嵌套的例子强化理解：

.box {
  .title {
    .dark-theme & {
      /* &替换为.box .title，展开后是 .dark-theme .box .title */
      background: #333;
    }
  }
}

这里的样式会匹配所有在.dark-theme元素内部的.box .title，不管.box和.dark-theme之间隔了多少层。

所以你看到HTML里.card不是.featured的直接子元素但样式仍生效，完全符合后代选择器的规则——只要.card在.featured的内部，.featured .card h2就能匹配到对应的h2。

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