English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:link pseudo-clase selector se utiliza para seleccionar enlaces dentro de los elementos. Se seleccionarán todos los enlaces no visitados, incluyendo aquellos que ya tienen otros pseudo-selectores (por ejemplo, :hover selector, :active selector, :visited selector). Para renderizar correctamente los estilos de los elementos de enlace, el pseudo-selector :link debe colocarse antes de otros pseudo-selectores y seguir el orden LVHA, es decir: :link — :visited — :hover — :active. El pseudo-selector :focus a menudo acompaña a :hover, y el orden debe determinarse según el efecto que desees lograr.
Manual de referencia de selectores CSS completos
Elegir el estilo de los enlaces no visitados:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Tutoriales básicos (oldtoolbag.com)</title>
<style>
a:link
{
fondo-color:lightgreen;
}
</style>
</head>
<body>
<a href="//es.oldtoolbag.com">oldtoolbag.com</a>
<a href="//www.baidu.com" target="_blank">baidu.com</a>
<a href="//www.pcjson.com" target="_top">pcjson.com</a>
<p><b>Atención:</b>:link selecciona el estilo del enlace al que aún no has visitado.</p>
</body>
</html>Prueba aquí ‹/›:link agrega estilos especiales a los enlaces no visitados.
Atención: :link selector no tiene estilo para los enlaces visitados.
Aviso: usar :visited Establece el estilo de los enlaces de la página visitada por el selector:hoverSelector para el estilo del enlace cuando hay un ratón suspendido sobre él.:active Estilo del selector cuando haces clic en el enlace.
Los números en la tabla indican la primera versión del navegador que admite la propiedad.
| Selector | |||||
|---|---|---|---|---|---|
| :link | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Tutoriales de CSS: Enlaces de CSS
Tutoriales de CSS: Clases de pseudo de CSS
Enlaces activados, visitados, no visitados o cuando hay un ratón suspendido sobre ellos:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Tutoriales básicos (oldtoolbag.com)</title>
<style>
a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
</style>
</head>
<body>
<p>Coloca el ratón sobre y haz clic en este enlace: <a href="//es.oldtoolbag.com/">oldtoolbag.com</a></p>
</body>
</html>Prueba aquí ‹/›Estilos de enlace con diferentes estilos:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Tutoriales básicos (oldtoolbag.com)</title>
<style>
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:monospace;}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>
<body>
<p>Coloca el ratón sobre el enlace para ver el cambio de estilo.</p>
<p><a class="ex1" href="/css/">Este enlace cambia el color</a></p>
<p><a class="ex2" href="/css/">Este enlace cambia el tamaño de la fuente</a></p>
<p><a class="ex3" href="/css/">Este enlace cambia el color de fondo</a></p>
<p><a class="ex4" href="/css/">Este enlace cambia el tipo de fuente</a></p>
<p><a class="ex5" href="/css/">Este enlace cambia el estilo de texto</a></p>
</body>
</html>Prueba aquí ‹/›