Explicación detallada de las propiedades CSS: la diferencia entre pseudo-clases y pseudo-elementos

Escribí una publicación de blog "Propiedades CSS detalladas: antes y &: después" antes . En ese momento, no distinguía entre pseudo-elementos y pseudo-clases, así que confundí el concepto en el artículo. Afortunadamente, @riophae hermano corrigió mi error, así que Hoy planeo estudiar la diferencia entre los dos.
En primer lugar, leer la w3cdefinición de los dos:

• CSS Las pseudo-clases se usan para agregar efectos especiales a ciertos selectores.
• CSS Los pseudoelementos se usan para agregar efectos especiales a ciertos selectores.

Se pueden aclarar dos puntos: los dos primeros están relacionados con el selector y el segundo es agregar algunos efectos "especiales". Especial aquí se refiere a ambos describen otras csscosas no se pueden describir.

Pseudo-clase

Tipos de pseudoelementos

Diferencia

Aquí, un pseudo-clases :first-childy pseudo elementos :first-letterque deben compararse.

p>i:first-child {color: red}
<p>
    <i>first</i>
    <i>second</i>
</p>

// pseudo-clases :first-childpara añadir estilo al primer hijo
, si no utilizamos pseudo-clases, y la esperanza de lograr estos resultados, se puede hacer esto:

.first-child {color: red}
<p>
    <i class="first-child">first</i>
    <i>second</i>
</p>

Es decir, agregamos una clase al primer elemento hijo y luego definimos el estilo de esta clase. Luego, veamos los elementos:

p:first-letter {color: red}
<p>I am stephen lee.</p>

// pseudo-elementos :first-letteragregan estilo a la primera letra
Así que si no utilizamos los pseudo-elementos para lograr estos resultados, debería ser cómo hacerlo?

.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>

Es decir, añadimos una carta a la primera span, y luego a spanaumentar estilos.
La diferencia entre los dos ha salido a la luz. Eso es:

El efecto de las pseudo-clases se puede lograr agregando una clase real, y el efecto de los pseudo-elementos se puede lograr agregando un elemento real, razón por la cual se les llama pseudo-clases y pseudo-elementos.

Resumen

Pseudo-elementos y pseudo-clases razón tan confuso, debido a su efecto similar y la redacción es similar, pero, de hecho, css3para distinguir entre los dos, un pseudo-clase ha sido definida por dos puntos para indicar, mientras pseudo-elementos se utilizan con dos signos de dos puntos Dijo.

:Pseudo-classes
::Pseudo-elements

Pero debido a problemas de compatibilidad, la mayoría de ellos todavía son dos puntos simples unificados, pero aparte de los problemas de compatibilidad, debemos desarrollar buenos hábitos tanto como sea posible al escribir para distinguir los dos.