: after vs. :: after

134

C'è qualche differenza funzionale tra i pseudo-selettori CSS 2.1 :aftere CSS 3 ::after(oltre a ::afternon essere supportato nei browser più vecchi)? C'è qualche motivo pratico per utilizzare le specifiche più recenti?

— Parker Ault
fonte

Risposte:

133

È distinzione tra pseudo- classe e pseudo- elemento .

Fatta eccezione per ::first-line, ::first-letter, ::beforee ::after(che sono stati in giro un po 'di tempo e può essere utilizzato con i singoli i due punti se si richiede il supporto IE8), pseudo- elementi richiedono doppi due punti.

Le pseudo-classi selezionano gli elementi reali stessi, ad esempio puoi usare :first-childo :nth-of-type(n)per selezionare i primi o quelli specifici <p>in un div.
(E anche stati di elementi reali come :hovere :focus.)

Gli pseudo-elementi prendono di mira una sotto-parte di un elemento come ::first-lineo ::first-letter, cose che non sono elementi a sé stanti.

In realtà, una migliore descrizione qui: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Anche qui: http://www.evotech.net/blog/2007/ 05 / dopo-v-dopo-cosa-è-double-colon-notazione /

— Dominic
fonte

È a causa di questa distinzione che "pseudo-selettore" (dalla domanda) è un termine senza senso. Non usarlo mai.

— BoltClock

a meno che tu non stia parlando di entrambi. o in termini generici.

— Albert,

Questa è una grande spiegazione della teoria, ma ha attinenza con la questione pratica? C'è davvero qualche vantaggio nell'usare la specifica css3 nel fatto che il css2 farà lo stesso lavoro - in più browser?

— DRosenfeld,

@Dominic grazie - apprezzo il tuo indirizzo al mio commento. Non c'è dubbio che il problema del supporto per (almeno questo) tag CSS3 non sia quasi un problema ormai.

— DRosenfeld,

@ BorisD.Teoharov In particolare, è possibile utilizzare :aftere in modo ::afterintercambiabile con un comportamento identico, ad eccezione di IE8 che, come osserva la domanda, richiede i due punti singoli.

— Dominic

Selettori CSS come ::aftersono alcuni elementi virtuali non disponibili come elemento esplicito nella struttura DOM. Sono chiamati " pseudo-elementi " e vengono utilizzati per inserire del contenuto prima / dopo un elemento (ad es.: ::before, ::after) Oppure, selezionare una parte di un elemento (ad es ::first-letter.:). Attualmente c'è solo 5 elementi pseudo standard: after, before, first-letter, first-line, selection.

D'altra parte, ci sono altri tipi di selettori chiamati " Pseudo-Classi " che vengono usati per definire un particolare stato di un elemento (come come :hover, :focus, :nth-child(n)). Questi selezioneranno l'intero elemento esistente in DOM. Le pseudo classi sono un lungo elenco con più di 30 elementi.

Inizialmente (in CSS2 e CSS1), la sintassi a due punti era usata sia per le pseudo-classi che per gli pseudo-elementi. Ma in CSS3 la ::sintassi ha sostituito la :notazione per pseudo-elementi per distinguerli meglio.

Per compatibilità con le versioni precedenti, la vecchia sintassi a due punti è accettabile per pseudo-elementi come as :after(i browser supportano ancora tutti la vecchia sintassi con un punto e virgola). Solo IE-8 non supporta la nuova sintassi (utilizzare i due punti se si desidera supportare IE8).

— S.Serpooshan
fonte