CSS :: prima è annullando :: first-letter codice

Question

Html:

<h1>Example title</h1> 

CSS:

h1::first-letter{ 
    display:none; 
} 
h1::before{ 
    content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png); 
} 

La mia domanda è: perché è :: prima sta uccidendo :: regola first-letter ? Che cosa sta succedendo qui? Se :: before is removed, :: first-letter funziona bene.

Esiste un'alternativa alla destinazione della prima lettera in questo esempio senza modificare l'html?

http://jsfiddle.net/Borachio/kvaxmhth/

Answer 1

Da the spec:

Dopo il dominio p::before {content: "Note: "}, il selettore p::first-letter matches the "N" of "Note".

Si noti inoltre che la proprietà display non è valida su :first-letter e :first-line elementi pseudo. Ancora una volta, dalle specifiche:

Una versione futura di questa specifica può consentire a questo pseudoelemento di applicare a più tipi di visualizzazione.

Questo è il comportamento previsto.

Soluzione:

HTML:

<div><h1>Example title</h1></div> 

e CSS:

h1{ 
    display: inline-block; 
} 
h1::first-letter{ 
    font-size: 0px; 
} 
div::before{ 
    content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png); 
} 

Demo: http://jsfiddle.net/kvaxmhth/3/

Answer 2

Non sta uccidendo, il :: first-letter non ha il visualizza la dichiarazione.

Maggiori informazioni: http://www.w3schools.com/cssref/sel_firstletter.asp