なぜ:: firstlineはp/divタグのようなスパンでは機能しませんか？

Question

Iは、以下のコードを有する：

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タグに動作していないことです。 MDN 1として

Answer 1

：

最初の行のみがブロックコンテナボックスに意味があり、従って:: first-line擬似要素ブロックの表示値を持つ要素にのみ効果があり、インラインブロック、表セル、または表キャプションのいずれかです。それ以外の場合は、:: first-lineは効果がありません。以下

W3C Specからの抽出物である：（CSSで7.1.1最初にフォーマット線定義）CSSで

、:: first-line擬似要素のみを持つことができブロックボックス、インラインブロック、表キャプション、表セルなどのブロック状のコンテナに接続すると効果があります。

span elements are display: inline by default::first-lineセレクタは影響を与えません。 displayをspanに変更して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::最初のラインセレクタのみブロック要素のために働くことを述べています。これが機能するためには、単にインラインブロック又はブロックに表示を変更するようスパンは、デフォルトでインライン要素です。