¿Por qué el enlace pseudo clase rompe las reglas de especificidad de CSS esperadas?

Según entiendo, el CSS specificity rules indica que una pseudoclase tiene el mismo peso que un selector de etiqueta. Entonces, un selector como "div p a" sería más específico que "a: link".¿Por qué el enlace pseudo clase rompe las reglas de especificidad de CSS esperadas?

Pero como demuestra el siguiente caso de prueba, ese no parece ser el caso. ¿Por qué el enlace es rojo?

<!DOCTYPE HTML> 
<html> 
<head> 
    <title></title> 
    <meta charset="UTF-8"> 

    <style type="text/css" media="screen"> 
     a:link { color: red; } 
     div p a { color: green; } 
     div.foobar p a { color: green; } 
    </style> 
</head> 
<body> 
    <div> 
     <p> 
      <a href="http://somecrazyurlwierdthing.com">A link... why is it red?</a> 
     </p> 
    </div> 

    <div class="foobar"> 
     <p> 
      <a href="http://somecrazyurlwierdthing.com">But it turns green when you add a class selector.</a> 
     </p> 
    </div> 
</body> 
</html>

editado el ejemplo para incluir el "div.foobar p un" selector.

Fuente

2009-11-26 timmfin

La especificación se vincula a los estados que un pseudo-clase (:link en este caso) tiene mayor especificidad que un nombre de elemento. Para ser precisos, utilizando el formato abcd, sus tres selectores salen como:

a-b-c-d 
0 0 1 1 
0 0 0 3 
0 0 1 3

su posible confusión proviene de su uso del término "pseudo selector", que no tiene en cuenta la distinción entre pseudo-clases como :link y pseudo-elementos tales como :first-line.

Fuente

2009-11-26 15:30:28 NickFitz

Sí, no me di cuenta de que hay una diferencia entre un pseudo selector y una pseudoclase. Tal vez haya una razón por la cual una pseudoclase tiene un peso mayor, pero al menos en mi caso, parece hacer más difícil la codificación de los estilos genéricos de "a: enlace". Creo que voy a cambiar la plantilla de wordpress que estoy editando para usar "a {color: XXX}" en lugar de "a: link {color: XXX". – timmfin

Recuerde que un elemento 'a' no tiene que ser un enlace; en su lugar puede ser un delimitador, para vincularse * a * a través de un fragmento de URL.Esta es la razón principal para '' link' y las pseudo-clases relacionadas: permitir que los elementos 'a' que son enlaces se distingan de aquellos que no lo son. También considere usar las pseudo-clases apropiadas (': link',': visited', ': hover',': focus' y ': active') para mejorar la usabilidad al reflejar el estado de la interacción del usuario con la página/sitio ; Personalmente, no me gustan las páginas con una serie de enlaces que no definen un estilo distinto para ': visited'. – NickFitz

La especificidad para cada uno:

a: link 0,0,1,1

div p un 0,0,0,3

a: link victorias.

Fuente

2009-11-26 15:25:00

De acuerdo con el enlace de especificación CSS arriba: "li: primera línea/* a = 0 B = 0 c = 0 d = 2 -> especificidad = 0,0,0,2 * /" A menos la especificación tiene un error tipográfico o ": first-line" es menos específico que ": link", I "a: link" debe ser 0,0,0,2. – timmfin

Ver mi respuesta,: first-line es un pseudo-elemento, no una pseudo-clase! –

Como dijo Gab: el enlace es una pseudoclase. la especificidad para a: link es 0,0,1,1. –

La cosa es :link no es un pseudo-elemento como :first-line, es una pseudo-clase y por lo tanto cuenta como una clase para la especificidad.

Source

Fuente

2009-11-26 15:28:26

Y es por eso que las versiones más nuevas de la especificación de CSS distinguen los pseudo-elementos de las pseudo-clases con un '::' en lugar de un ':'. –

¿Por qué el enlace pseudo clase rompe las reglas de especificidad de CSS esperadas?

Respuesta

Cuestiones relacionadas