H1 标签中 span 标签内的文本样式不能很好地应用

<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示例，输出错误

似乎因为span标签内的文本以与h1文本结束的字母相同的字母开始(字母't')，它有点忽略了span标签中第一个't'字母的样式。

例如，我尝试将span标签中的第一个't'字母替换为's'字母，结果令人满意:

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

或者只是在span标签内添加空白，并且也得到令人满意的结果，确保我的样式实现是好的:在span

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

这实际上是一个bug还是我做错了什么?

我试着找到这里和其他一些网站上出现的问题。

我试着问过ChatGPT，他似乎不知道问题出在哪里。

我所期望的是，我的代码的输出将以这种方式产生，如上所述: