2009-10-08 13 views
8

¿Cuál es el orden correcto de diseño del elemento <a> (enlace, visitado, desplazado, activo). Todos son confusos al proporcionar una combinación diferente como LVHA, LAHV. ¿Alguien puede especificar el orden correcto?orden de enlace en css

Respuesta

15

enlace visitado Hover activo

Citando el CSS specification:

a:link { color: red } /* unvisited links */ 
a:visited { color: blue } /* visited links */ 
a:hover { color: yellow } /* user hovers  */ 
a:active { color: lime } /* active links */ 

Tenga en cuenta que la A: hover debe colocarse después de la R: enlace y A: visited reglas, ya que de lo contrario el las reglas en cascada ocultarán la propiedad 'color' de la regla A: hover. De forma similar, dado que A: active se coloca después de A: hover, el color activo (lime) se aplicará cuando el usuario se active y se desplace sobre el elemento A.

+0

cuando lo visita convierte todos los enlaces de color al color visitado. ¿Por qué ocurre – ArK

+0

porque ha visitado todos los enlaces anteriormente? Solo una conjetura ... – Joey

+0

no es la página que acaba de cargarse. – ArK

3

Es posible que también prefiera el pedido VLHA, que no hace la diferencia. Sin embargo, la especificación de CSS especificó el orden LVHA y, de hecho, este es fácil de memorizar: ¡LoVeHA!

+0

Cute mnemonic! +1 –

+1

Pruebe esto, 'LoVe ​​/ HAte', copiado de Pro CSS Techniques. –

1

Aquí está la mejor orden, especialmente para las pseudo clases. A L V VH H A (I pronunciarlo Al'va ha ')

a    { color: white; text-decoration: none; }     /* bookmark */ 
a:link   { color: red; }           /* regular link */ 
a:visited  { color: green; text-decoration: strikethrough; }  /* visited link */ 
a:visited:hover { color: blue; text-decoration: underline overline; } /* visted hover link */ 
a:hover  { color: yellow; text-decoration: underline overline; } /* hover link */ 
a:active  { color: orange; text-decoration: underline overline; } /* active link */ 

Esto mantiene ambos estados visitados y ambos flotar estados juntos, así como quedarse con el orden especificado. También permite un estilo de marcadores tales como

<a name="bookmark_name">Bookmark Text</a> 

cual puede orientar con

<a href="bookmark_name">Link Text</a> 

Encuentro esto es muy bueno para la vinculación de derecho de una sección de un sitio, pero en el que no desea que el marcador para tener un estilo de desplazamiento automático, que será ya que es una etiqueta de anclaje.

Cuestiones relacionadas