为什么 ::first-line 不适用于 p / div 标签之类的跨度？

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：

A first line has only meaning in a block-container box, therefore the ::first-line pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell or table-caption. In all other cases, ::first-line has no effect.

下面是 W3C Spec 的摘录：（第 7.1.1 节 CSS 中的第一个格式化行定义）

In CSS, the ::first-line pseudo-element can only have an effect when attached to a block-like container such as a block box, inline-block, table-caption, or table-cell.

因为 span elements are display: inline by default ::first-line 选择器对其没有影响。如果我们将 span 的 display 更改为 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>

Answer 2

The documentation 声明 ::first-line 选择器仅适用于块元素。 span 默认是一个 inline 元素，所以为了让它工作，只需将显示更改为 inline-block 或块.

为什么 ::first-line 不适用于 p / div 标签之类的跨度？

Why is ::first-line not working for span like p / div tags?

html

css

css-selectors

pseudo-element