¿Cómo funcionan los niveles de especificidad CSS entre clases/pseudo-clases y elementos/pseudo-elementos?

Question

estoy usando las siguientes definiciones (adaptado de la especificación CSS2 http://www.w3.org/TR/CSS21/cascade.html#specificity)

• a = utilizando el atributo de estilo en un elemento
• b = número de atributos ID
• c = número de atributos (clases) y clases de seudo (: enlace,: hover)
• d = número de elementos y pseudo-elementos (: de primera línea,: first-letter)

Con las siguientes estilos (mis cálculos a la derecha):

.content   {color: green;} /* a=0 b=0 c=1 d=0 -> 0,0,1,0 */ 
.content:hover {color: yellow;} /* a=0 b=0 c=2 d=0 -> 0,0,2,0 */ 
li    {color: orange;} /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */ 
li:first-line  {color: pink;} /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */ 

y el código HTML siguiente

<li class="content">The first line</li> 

Cuando lo abra en un navegador, la línea de texto es de color rosa. Pensé que sería verde y en vuelo estacionario, sería amarillo. Pensé que los elementos y los pseudoelementos (la d en el cálculo) tienen menos peso que las clases y las pseudo clases (la c en los cálculos).

Answer 1

Supongo que :first-line es más específico que solo .content. Por lo tanto, la primera línea del texto es rosa, pero la viñeta de la lista es verde (y amarilla al desplazarse). Todo es bueno, en cuanto a mí.

imaginar que el selector de :first-line es sólo un selector de nodo de texto anidado, como:

<li class="content"> 
    <text:text>The first line</text:text><br /> 
    The second line 
</li> 

Opera en el elemento anidado, por lo que es más importante que cualquier otro selector.

Answer 2

Su comprensión de la especificidad es completamente correcta. Las pseudo-clases y las clases son iguales entre sí en especificidad, y ambas tienen un rango más alto que los pseudo-elementos y los elementos (que también son iguales entre sí). Esto es explained pretty clearly en la especificación que ya ha vinculado.

¿Por qué las reglas que establece en li:first-line tienen prioridad sobre las que establece en .content:hover, si esta última es más específica?

Porque, desde la perspectiva de CSS, los pseudo-elementos son elementos. Esto significa que tiene un elemento li:first-line que, si no lo diseñó, heredarácolor: green o color: yellow de las reglas .content y .content:hover. Pero las reglas que se dirigen a un elemento directamente siempre tienen prioridad sobre las reglas heredadas, y su selector :first-line se dirige a un pseudo-elemento dentro de su li. Las reglas :first-line ganan simplemente porque no son heredadas y las reglas de .content y .content:hover selectores son heredadas (por el pseudo-elemento contenido en li). Las reglas de especificidad son una pista falsa. ellos ni siquiera entran en juego.