SCSS：嵌套选择器中如何添加后缀并正确选中直接子元素？

问题原因 #

你的SCSS代码中，&代表的是当前上下文的完整父选择器链。在.c的嵌套层级里，&会被展开成.a > .b > .c，所以& > &__content会被编译成.a > .b > .c > .a > .b > .c__content，这就是实际结果不符合预期的原因。

解决方案 #

根据需求，你可以选择以下几种方法：

方法1：直接指定目标选择器（简单直接）

如果.c的类名固定，直接写死目标选择器即可：

.a {
  > .b {
    > .c {
      & > .c__content {
        background: black;
      }
    }
  }
}

编译后会得到你期望的结果：

.a > .b > .c > .c__content {
  background: black;
}

方法2：使用变量存储当前类名（动态可维护）

如果需要后续方便修改类名，用变量存储当前层级的类名，避免重复修改：

.a {
  > .b {
    $current-class: .c;
    > #{$current-class} {
      & > #{$current-class}__content {
        background: black;
      }
    }
  }
}

这种方式下，后续只要修改$current-class的值，相关选择器会自动同步更新。

方法3：利用SCSS的选择器函数（高级动态方案）

使用SCSS的nth(&, -1)函数提取父选择器链的最后一个选择器，实现完全动态的写法：

.a {
  > .b {
    > .c {
      @at-root #{&} > #{nth(&, -1)}__content {
        background: black;
      }
    }
  }
}

nth(&, -1)会从完整的父选择器链（.a > .b > .c）中提取最后一个选择器.c，@at-root确保选择器不会被额外嵌套，最终编译结果符合预期。

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