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

Question

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

  

  

    巧克力
    ＆螺母
    和葡萄干
  

 

scss：

  $ cakeColor：金色;
$ chocolate：棕色；
$ nut：goldenRod；
$葡萄干：darkGoldenRod；



.all-cakes {

  左边距：200px;
  边距顶部：100px;

  。蛋糕 {

    ＆>跨度{
      font-size：40px;

      span ::首字母{
        颜色：黑色
      }

      ＆：nth-​​child（1）{
        颜色：$ chocolate;
      }


      ＆：nth-​​child（2）{
       颜色：$ nut;
      }


      ＆：nth-​​child（3）{
       颜色：$葡萄干；
      }
    }
  }
}
 

Answer 1

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

因此，我将改为使用: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;
      }
    }
  }
}

Answer 2

这有效（已测试）

 span {

      font-size: 40px;

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