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

Question

如何为所有的符号添加黑色。我尝试了 span::first-letter 但它不适用。我基本上是在尝试将它们嵌套在 scss 中。

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

CSS:

$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;
      }
    }
  }
}

Answer 1

::第一个字母 doesn't work on inline elements .所以我们必须在 span 上使用 display:inline-block; 或 display:block; 或使用 p 或任何其他 block 级元素而不是 span。但即使我们在 block 级元素上使用首字母，它似乎也排除了非单词字符，如 @!=&% 等。但这在所有浏览器中并不一致。

所以我会用 :before{content:"&";color:black;} 来生成 & 符号。

$cakeColor: gold;
$chocolate: brown;
$nut: goldenRod;
$raisins: darkGoldenRod;



.all-cakes{

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

  .cake {

    & > span{
      font-size: 40px;

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


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

      &:nth-child(2):before {
         content: "&";
         color: black;
      }
      &:nth-child(3){
       color: $raisins;
      }
      &:nth-child(3):before {
         content: "&";
         color: black;
      }
    }
  }
}