Dlaczego :: pierwsza linia nie działa dla znaczników p/div typu span?

Question

Mam poniższy kod:

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>

kwestią jest, że pseudo-element pracuje dla p tag i zmieniony pierwszej linii do określonego koloru, ale sama nie pracuje dla span tagu.

Answer 1

Zgodnie MDN:

pierwszej linii ma znaczenie tylko w polu bloku pojemnika, w związku z czym :: pierwszej linii Pseudoelement ma jedynie wpływ na elementy o wartości wyświetlacza bloku inline-block, table-cell lub table-caption. We wszystkich innych przypadkach :: first-line nie ma żadnego efektu.

Poniżej znajduje się wyciąg z W3C Spec: (Sekcja 7.1.1 Pierwsza linia definicja sformatowane w CSS)

W CSS :: first-line pseudo-element może mieć tylko efekt po dołączeniu do kontenera podobnego do bloku, takiego jak blok, blok inline, podpis tabeli lub komórka tabeli.

Od span elements are display: inline by default selektor ::first-line nie ma na nie wpływu. Jeśli zmienimy display dla span na inline-block lub block, to zadziała.

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 stwierdza, że ​​:: first-line selektor działa tylko dla elementów blokowych. rozpiętość jest domyślnie rolki elementem tak, aby dla tej pracy, wystarczy zmienić wyświetlacz inline bloku lub bloku.