如何只为第一个 span 应用 css答案

【问题标题】：How to apply css only for first span如何只为第一个 span 应用 css
【发布时间】：2023-02-08 22:09:51
【问题描述】：

尝试只为第一个跨度应用 css。我试过了，但没有用。如果有人知道请帮助找到解决方案。

<span class="content">
   <svg xmlns="http://www.w3.org/2000/svg">
   <use xlink:href="assets/icons.svg#back-button"></use>
</svg>
 <span> Lorem ipsom </span><!-- only this span font color should be red -->

  <span>
   <span> </span>
  </span>
</span>

CSS：

.content > span:first-child {
   color: red;
   font-size: 12px;
   font-weight: bold;
 }

演示：https://stackblitz.com/edit/angular-svg-use-gvmekn?file=src%2Fapp%2Fapp.component.html

【问题讨论】：

标签： css

【解决方案1】：

您可以使用 first-of-type 这样的东西：

.content > span:first-of-type {
    color:red;
}

【讨论】：

【解决方案2】：

对不起，如果我的英语不是 100% 正确，我来自荷兰。

您可以通过给 span 一个像下面这样的类来做到这一点

旧：Lorem ipsum 新：Lorem ipsum

接下来，您可以将类名添加到 css 文件中，如下所示：

.firstspan {
  /* this is a example of code that will make the text red*/
  color: red;
  font-size: 12px;
  font-weight: bold;
}

我希望这有帮助。

【讨论】：