English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

libro de referencia de CSS

regla CSS @ (RULES)

大全 de atributos CSS

Selector :visited de CSS

:visited es un pseudo-clase CSS que representa los enlaces visitados por el usuario.

Manual de referencia de selectores CSS completos

Ejemplo en línea

Estilo de los enlaces visitados:

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Manual básico(oldtoolbag.com)</title> 
<style> 
a:visited
{
background-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>El estilo del selector :visited enlaza a las páginas que ya ha visitado.</p>
</body>
</html>
Prueba y observa ‹/›

Definición y uso

:visited agrega un estilo especial a los enlaces visitados.

Consejo: Se utiliza el selector :visited para establecer el estilo de los enlaces de páginas visitadas, :hoverSelector para el estilo del enlace cuando hay un ratón suspendido sobre él,:active Configuración del selector cuando haces clic en el enlace para cambiar el estilo.

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite la propiedad.

Selector




:visited4.07.02.03.19.6

Artículos relacionados

Tutorial de CSS: Enlaces de CSS

Tutorial de CSS: Pseudoclases de CSS

Ejemplo en línea

Enlaces activos, visitados, no visitados o cuando hay un ratón suspendido sobre ellos:

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Manual básico(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 y observa ‹/›

Ejemplo en línea

Estilos de enlace con diferentes estilos:

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Manual básico(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 y observa ‹/›

Manual de referencia de selectores CSS completos