Css 如何选择<；的第一个字符；i>；在a<；p>；标签

我正在尝试下面的方法

p+i:first-letter
{
background-color:red;
}

或

在这样的html代码段上

<p>
<i>  Sample text</i>
</p>

示例文本

：第一个字母对
i
等内联元素不起作用<代码>：第一个字母

作用于块元素，例如段落、表格标题、表格单元格、列表项或应用了

内联块

属性的块元素

<div>
    <p>
       <i>Sample text</i>
    </p>
</div>

---

选中

第一行仅在块容器框中有意义，因此：：first letter伪元素仅对显示值为block、inline block、table cell、list item或table caption的元素有效。在所有其他情况下，：：第一个字母无效

---

---

我试过这样做。p：第一个字母i{背景色：红色；}这也不起作用。无论如何，要达到这个目的？@Ashitaka王子：这个解决方案是不必要的复杂。您所需要做的就是使

i

成为一个内联块；这个答案中的其他一切都是多余的。

<div>
    <p>
       <i>Sample text</i>
    </p>
</div>

i { display: inline-block; }

div p:last-child i:first-child:first-letter { font-weight: bold }