2012-01-24 14 views
91

Esiste qualche differenza funzionale tra i CSS 2.1 e gli pseudo-selettori CSS 3 ::after (diversi da ::after non supportati nei browser precedenti)? C'è qualche ragione pratica per usare le nuove specifiche?: after vs. :: after

risposta

95

E 'pseudo-classe vs pseudo elemento distinzione.

Fatta eccezione per ::first-line, ::first-letter, ::before e ::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-elementirichiedono doppi due punti.

pseudo-classi selezionare elementi veri e propri, è possibile utilizzare :first-child o :nth-of-type(n) per selezionare i primi o specifici s <p>' in un div, per esempio.
(e stati anche degli elementi reali come :hover e :focus.)

pseudo-elementi rivolgono un sub-parte di un elemento come ::first-line o ::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/after-v-after-what-is-double-colon-notation/

+4

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

+1

a meno che non si parli di entrambi. o in termini generici. – albert

+1

Questa è una grande spiegazione della teoria, ma ha un impatto sul problema pratico? C'è davvero qualche vantaggio nell'usare la specifica css3, dato che il css2 avrà lo stesso lavoro fatto - in più browser? – DRosenfeld

0

selettori CSS come ::after sono alcuni elementi virtuali non disponibile come elemento esplicito nel DOM albero. Essi sono chiamati "Pseudo-Elements" e vengono utilizzati per inserto alcuni contenuti prima/dopo un elemento (es: ::before, ::after) oppure, seleziona una parte di un elemento (es: ::first-letter). Attualmente ci sono solo 5 pseudo elementi standard: after, before, first-letter, first-line, selection.

D'altra parte, ci sono altri tipi di selettori chiamati "Pseudo-Classes" che vengono utilizzati per definire un speciale stato di un elemento (come come :hover, :focus, :nth-child(n)). Questi selezioneranno l'intero elemento esistente in DOM. Le pseudo classi sono una lunga lista con più di 30 articoli.

Inizialmente (nei CSS2 e CSS1), la sintassi dei singoli punti veniva utilizzata sia per le pseudo-classi che per gli pseudo-elementi. Tuttavia, nei CSS3 la sintassi :: sostituiva la notazione : per gli pseudo-elementi per distinguerli meglio.

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