Qual è la differenza tra p :: first-letter e p :: first-letter?

Question

Qual è la differenza tra p ::first-letter e p::first-letter?

p::first-letter può selezionare con successo la prima lettera all'interno di un paragrafo, ma non è possibile impostare p ::first-letter.

Answer 1

Il selettore p::first-letter seleziona la prima lettera all'interno dello p mentre lo p ::first-letter seleziona la prima lettera all'interno degli elementi figlio dello p.

p ::first-letter è equivalente a p *::first-letter. Il sotto è ciò che il specs dire:

Se un selettore universale rappresentato da * (cioè senza un prefisso namespace) non è l'unico componente di una sequenza di semplici selettori o è immediatamente seguita da una pseudo-elemento, allora il * può essere omesso e la presenza del selettore universale implica.

Nota: Anche se il selettore (p ::first-letter) si punti alla prima lettera all'interno tutti gli elementi figlio, il selettore ::first-letter funziona solo su elementi di blocco o inline-block e perciò non potrebbe lavorare su un span meno il suo display è stato modificato.

p ::first-letter { 
 
    color: red; 
 
} 
 
p::first-letter { 
 
    color: blue; 
 
} 
 

 
span{ 
 
    display: inline-block; 
 
}

<p>Some text <span>inside a span</span> and <span>inside this span too</span> 
 
</p>

Answer 2

p ::first-letter significa cambiare lo stile della prima lettera di qualsiasi elemento che è un discendente di p. Mentre lo p::first-letter significa cambiare la prima lettera dell'elemento p.