为什么:: first-line不适用于像p/div标签这样的span？

Question

我有以下代码:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
span::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

<span> This is to check span.This is to check spanThis is to check spanThis     is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check span</span>

<p>This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.</p>

问题是伪元素用于p标记并将第一行更改为指定的颜色,但同样不适用于span标记.

Answer 1

根据MDN:

第一行仅在块容器框中有意义,因此:: first-line伪元素仅对具有block,inline-block,table-cell或table-caption的显示值的元素产生影响.在所有其他情况下,:: first-line无效.

以下是W3C规范的摘录:( 第7.1.1节CSS中第一个格式化的行定义)

在CSS中,:: first-line伪元素只有在附加到块状容器(如块框,内联块,表格标题或表格单元格)时才能生效.

由于span要素是display: inline默认的::first-line选择上有没有影响.如果我们更改display为spanto inline-block或block,它将起作用.

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
span::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
span.block {
  display: block;
}
span.inline-block {
  display: inline-block;
}

<h3>Default Span</h3>
<span> This is to check span.This is to check spanThis is to check spanThis     is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check span</span>

<h3>Span with display as block</h3>
<span class='block'> This is to check span.This is to check spanThis is to check spanThis     is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check span</span>

<h3>Span with display as inline-block</h3>
<span class='inline-block'> This is to check span.This is to check spanThis is to check spanThis     is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check span</span>

<p>This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.</p>