Sass中:与&:的差异及适用场景咨询：如何正确选择.root容器的第一个子元素

先直接给你捋清楚结论：如果你的需求是选中.root容器内部的第一个子元素，那第一段写法的编译结果才符合预期；但要是你想选中本身作为父元素第一个子元素的.root元素，第二段代码才是正确的。结合你描述的“选择.root容器的第一个子元素”来看，我们得仔细拆解两者的核心差异：

1. 不带&的写法：.root{ :first-child{ color: green; } } #

这段Sass编译后的原生CSS是：

.root :first-child {
  color: green;
}

这里的空格代表后代选择器，作用是：选中所有属于.root元素后代（包括直接子元素、嵌套的孙子元素等），且自身是父元素第一个子元素的元素。举个例子：

<div class="root">
  <p>这是.root的第一个直接子元素，会被染色</p>
  <div>
    <span>这是div的第一个子元素，也会被染色</span>
  </div>
</div>

上面的<p>和<span>都会被这段样式影响。如果只想精准选中.root的直接第一个子元素，你可以调整成：

.root{ > :first-child{ color: green; } }

编译后得到.root > :first-child，只会匹配直接子元素。

2. 带&的写法：.root{ &:first-child{ color: green } } #

&在Sass里是当前父选择器的完全引用，所以这段代码编译后的CSS是：

.root:first-child {
  color: green;
}

它的作用是：选中本身是其父元素第一个子元素的.root元素。比如：

<div class="parent">
  <div class="root">我是parent的第一个子元素，会被染色</div>
  <div class="root">我是parent的第二个子元素，不会被选中</div>
</div>

只有第一个.root会被应用样式，这和你说的“选择.root容器的第一个子元素”需求完全不匹配。

一句话总结&的核心价值 #

&的本质是把父选择器完整“粘”到当前位置，不会产生空格，用来构建针对父元素本身的伪类/伪元素组合（比如:hover、:active这类状态）；而不带&的写法会生成后代选择器，用来选中父元素内部的子元素。

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