Sass 使用&；有什么区别吗类型的第一个vs仅：SCS中类型的第一个

使用嵌套在apple类中的

&:first of type

与仅嵌套在all fruits类中的

：first of type

有什么区别吗。因为他们把苹果词变成红色，结果是一样的。如何知道何时使用它们

html:

vs

使用

&:first of type

。。。仅vs

：类型的第一个

是的，这两者之间是有区别的，在某些情况下可能会有很大的区别。请看一下从SASS示例生成的CSS：

/*：第一个类型示例*/
.所有水果：第一类{
字体大小：100px；
}
/*&：第一个类型示例*/
苹果：第一种{
字体大小：100px；
}

在第一个示例中，您说“将从.all fruits元素派生的任何元素的字体大小设置为100px，假设它是其类型的第一个元素”。因此，如果您在
.all fruits
div中添加任何非段落元素，它的字体大小也将为100px。考虑下面的例子：


苹果

草莓
好吃的

使用
.all fruits:first of type
时，span的字体大小也将为100px，而
则为所有fruits.apple:first of type
将确保只有其类型的第一个元素具有
。apple
类获得100px字体

因为它们都给出相同的结果。。。如何知道何时使用它们

在某些特定情况下，两者都给出了相同的结果，这并不能成为假设两者同样适合这份工作的借口。我相信以下CSS将为您提供与当前HTML相同的结果：

。所有水果{
左边距：200px；
边缘顶部：100px；
}
.所有水果.苹果{
颜色：红色；
}
*：非（：类型的最后一个）{
字体大小：100px；
}

但这并不意味着我的
：not
选择器有任何用处。事实上，使用该选择器将是一个可怕的决定

虽然很难预测当前HTML中可能添加的所有内容，也很难编写100%符合未来要求的CSS，但通常情况下，最好通过类而不是非常通用或通用的选择器应用样式

在您的情况下，
.apple:first of type
似乎比仅仅选择
：first of type
更好。如果我假设你的需求更多，我也会考虑使用<代码>水果：第一个类型因为它会增加列表中第一个水果的字体大小，而不是苹果。
<div class="all-fruits">
    <p class="fruit apple">Apple</p>
    <p class="fruit strawberries">Strawberries</p>
</div>

$apple: red;



.all-fruits{ 
  margin-left: 200px;
  margin-top: 100px;
  .apple {
    color: $apple;
  }
  :first-of-type {
    font-size: 100px;
  }
}

.all-fruits{
  margin-left: 200px;
  margin-top: 100px;
  .apple {
    color: $apple;
     &:first-of-type {
       font-size: 100px;
     }
  }
}