Question

我正在尝试下面的内容，

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

或

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

在像这样的html片段上

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

Answer 1

:first-letter不适用于内联元素，例如i。 :first-letter适用于块元素，例如段落，表格标题，表格单元格，列表项目或应用了inline-block属性的块元素。

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

CSS

i { display: inline-block; }

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

Answer 2

第一行仅在块容器框中有意义，因此:: first-letter伪元素仅对显示值为block，inline-block，table-cell，list-item的元素产生影响或表格标题。在所有其他情况下，:: first-letter无效。