使用：类型的第一个伪类

:first-of-type
first-of-type CSS伪类表示一组同级元素中其类型的第一个元素。
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

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

<span class="content">
  <svg viewBox="0 0 10 2" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="10" y2="0" stroke="black" />
</svg>

  <span> Lorem ipsom </span>
  <!-- only this span font color should be red -->

  <span>
    Child
   <span> Inner child </span>
  </span>
</span>

使用相邻同级组合符

+
相邻的兄弟组合符（+）分隔两个选择器，并且只有当第二个元素紧跟在第一个元素之后，并且两个元素都是同一个父元素的子元素时，才匹配第二个元素。
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
一个二个一个一个

您可以使用first-of-type，如下所示：

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

问题在于，:first-child选择器仅适用于您要查找的span是.content的第一个子对象的情况。
在您的例子中，第一个子标记是svg标记，因此它不起作用。
有3种方法可以解决这个问题：
1.使选择器为.content > span:nth-child(2)，这在上面的例子中是有效的，但是如果你在span和svg之间添加了额外的元素，它将再次失效。

1. .content > span:first-of-type。这似乎就是您要查找的内容，即.content的子对象的第一个span。
2. span.some-meaningful-classname-通过将classname="some-meaningful-classname"添加到span中，您可以灵活地选择要将类应用到哪些span。
   由您决定搭配哪个，取决于您的要求。
   此外，这里有一个很好的CSS选择器参考：https://www.w3schools.com/cssref/css_selectors.php

您只需为span指定一个如下所示的类即可完成此操作
旧版本：

<span> Lorem ipsom </span>

新增：

<span class="firstspan"> Lorem ipsom </span>

(Edit：很抱歉，忘记将标记为代码，因此无法正确显示）
接下来你可以像这样把类名添加到css文件中：

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

希望这能帮上忙。

• • 因为.container也是一个span，所以声明相互重叠。**

要做到这一点，您只需要将第n个子对象作为目标，例如span:nth-child(2)或任何您希望通过第n个子对象（'child No. '）实现的范围。
超文本：

<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：

span:nth-child(2) {
        color: red;
        font-size: 12px;
        font-weight: bold;
      }