听伙计们，我一直在经历一个令人沮丧的错误，而建立一个目标网页为我的网站...
所有我尝试做的是有somthing看起来像下面的图像：logo exemple with the currect output
所以为了完成这样的设计，我想做的是为蓝色文本添加一个h1标签，在它的内部，我将为粉红色文本添加一个span标签。

超文本标记语言

这就是为什么我的html看起来像这样：

<div className="header_container">
        <header>
          <h1>
            text
            <span>ti</span>
          </h1>
        </header> 
</div>

（我使用react，所以这就是为什么'className'是for）

SCSS

为了实现这种样式，我在scss文件中定义了以下内容：

.header_container{
        position: relative;
        color: #181d3d; /*blue color*/
        h1{
            font-weight: 700;
            font-size: 3.75rem;
            line-height: 4.725rem;
            span {
                color: #ec6c83; /*pink color*/
            }
        }       
}

问题是什么

出于某种原因，这是我在浏览器中得到的输出：logo exemple with the wrong output
似乎是因为span标签中的文本以相同的字母开始，h1文本以（字母't '）结束，它有点忽略span标签中第一个't'字母的样式。
例如，我尝试将span标签中的第一个字母“t”替换为“s”，结果令人满意：logo exemple with 'si' insted of 'ti'

<div className="header_container">
        <header>
          <h1>
            text
            <span>si</span>
          </h1>
        </header> 
</div>

或者只是在span标签中添加一个空格，也可以得到令人满意的结果，确保样式实现是好的：logo exemple with ' ti' in span

<div className="header_container">
        <header>
          <h1>
            text
            <span> ti</span>
          </h1>
        </header> 
      </div>
</div>

这真的是一个bug还是我做错了什么？
我试图找到在这里和其他一些网站上打开的问题。
我试着问过ChatGPT，他似乎不知道问题出在哪里。
我所期望的是，我的代码的输出将以如上所述的方式产生：logo exemple with the currect output