Css 如何将颜色添加到嵌套字母中

如何为所有的符号添加黑色。我试过

span:：第一个字母

，但不适用。我基本上是想把它们放在SCS里

<div class="all-cakes">
  <p class="cake">
    <span class = "chocolate"> Chocolate </span>
    <span class = "nuts"> & nuts </span> 
    <span class = "raisins"> & raisins</span>
  </p>
</div>

这是有效的（经过测试的）

---

：：第一个字母

。所以我们必须使用

display:inline块或<代码>显示：块span

上编码>或使用

p

或任何其他块级元素而不是

span

。 但即使我们在块级元素上使用第一个字母，它似乎也排除了非单词字符，如

@！=&%等等。但这在所有浏览器中并不一致

因此，我将在{content:&“color:black；}

之前生成带有

：的符号


$cakeColor:金色；
$巧克力：棕色；
$nut:一枝黄花；
$葡萄干：黑加仑；
.所有的蛋糕{
左边距：200px；
边缘顶部：100px；
.蛋糕{
&>跨度{
字体大小：40px；
&：第n个孩子（1）{
颜色：$巧克力；
}
&：第n个孩子（2）{
颜色：坚果；
}
&：第n个孩子（2）：在{
内容：&；
颜色：黑色；
}
&：第n个孩子（3）{
颜色：葡萄干；
}
&：第n个孩子（3）：在{
内容：&；
颜色：黑色；
}
}
}
}
span:：first letter
我想应该是
&：：first letter
$cakeColor: gold;
$chocolate: brown;
$nut: goldenRod;
$raisins: darkGoldenRod;



.all-cakes{

  margin-left: 200px;
  margin-top: 100px;

  .cake {

    & > span{
      font-size: 40px;

      span::first-letter{
        color: black;
      }

      &:nth-child(1){
        color: $chocolate;
      }


      &:nth-child(2){
       color: $nut;
      }


      &:nth-child(3){
       color: $raisins;
      }
    }
  }
}

 span {

      font-size: 40px;

      &:first-letter {
         color: black;
      }
}