首字母使Chrome在错误的地方突出显示

Question

当我使用这个CSScode来设置我的文字的第一个字母时，Chrome中出现了一些奇怪的事情：

main p::first-letter {
  font-size: 300%;
}

<main>
  <p>
    This is some sample text
  </p>
</main>

当我现在突出显示“是”这个词时，“样本”这个词的字母“pl”会突出显示。您可以在此处测试：jsfiddle

为了更清楚，这就是：

如您所见，突出显示的文字位于错误的位置。

这是我的错误还是Chrome中的错误？我该如何解决？

Answer 1

我发现为什么会这样做。 这是因为<p>之后的“回归”。

因此，为了防止这种行为，您必须将应答器<p>和他的内容写在一行中，如下所示：

<p>This is some sample text</p>

而不是这样

<p>
    This is some sample text
</p>

我还没有找到另一个解决方案......抱歉。

Answer 2

每个浏览器的最佳代码都将使用此代码

<main>
<p>
   <span>T</span>his is some sample text
</p>

main p span{
font-size: 300%;

}