: después vs. :: después

133

¿Hay alguna diferencia funcional entre el CSS 2.1 :aftery los ::afterpseudo-selectores CSS 3 (aparte de que ::afterno es compatible con navegadores antiguos)? ¿Hay alguna razón práctica para usar la nueva especificación?

css css-selectors pseudo-element pseudo-class Parker Ault
fuente

Respuestas:

132

Es pseudo- clase vs pseudo- elemento de distinción.

A excepción de ::first-line, ::first-letter, ::beforey ::after(que han sido alrededor de un poco de tiempo y se puede utilizar con dos puntos individuales si necesita ayuda IE8), pseudo- elementos requieren dos puntos dobles.

Las pseudo-clases seleccionan elementos reales por sí mismos, puede usar :first-childo :nth-of-type(n)para seleccionar los primeros o específicos <p>en un div, por ejemplo.
(Y también estados de elementos reales como :hovery :focus.)

Los seudoelementos se dirigen a una subparte de un elemento como ::first-lineo ::first-letter, cosas que no son elementos por derecho propio.

En realidad, mejor descripción aquí: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
También aquí: http://www.evotech.net/blog/2007/ 05 / after-v-after-what-is-double-colon-notation /

Dominic
fuente

Es por esta distinción que "pseudo-selector" (de la pregunta) es un término sin sentido. No lo uses, nunca.

BoltClock

a menos que estés hablando de los dos. o en términos genéricos.

albert

Esta es una gran explicación de la teoría, pero ¿tiene relación con el tema práctico? ¿Existe realmente algún beneficio al usar la especificación css3 ya que css2 realizará el mismo trabajo, en más navegadores?

DRosenfeld

@Dominic gracias. Le agradezco que haya abordado mi comentario. No hay duda de que el problema del soporte para (al menos esto) la etiqueta CSS3 ya casi no es un problema.

DRosenfeld

@ BorisD.Teoharov En concreto, se puede usar :aftery ::afterde manera intercambiable con un comportamiento idéntico con la excepción de Internet Explorer 8 que, como las notas de interrogación, requiere la única colon.

Dominic

Los selectores de CSS ::afterson algunos elementos virtuales que no están disponibles como elemento explícito en el árbol DOM. Se denominan " pseudo-elementos " y se utilizan para insertar algún contenido antes / después de un elemento (por ejemplo ::before, ::after) o seleccionar alguna parte de un elemento (por ejemplo:) ::first-letter. Actualmente hay sólo 5 pseudo elementos estándar: after, before, first-letter, first-line, selection.

Por otro lado, hay otros tipos de selectores llamados " pseudo-clases ", que se utilizan para definir un estado especial de un elemento (como como :hover, :focus, :nth-child(n)). Estos seleccionarán todo un elemento existente en DOM. Las pseudo clases son una larga lista con más de 30 elementos.

Inicialmente (en CSS2 y CSS1), la sintaxis de dos puntos se utilizó para pseudo-clases y pseudo-elementos. Pero, en CSS3, la ::sintaxis reemplazó la :notación de pseudoelementos para distinguirlos mejor.

Por compatibilidad con versiones anteriores, la antigua sintaxis de dos puntos es aceptable para pseudoelementos como as :after(los navegadores todavía admiten la sintaxis anterior con un punto y coma). Solo IE-8 no admite la nueva sintaxis (use dos puntos si desea admitir IE8).

S.Serpooshan
fuente