English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Manual de referencia de selector CSS completo
Establecer estilo del enlace activo:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guía básica(oldtoolbag.com)</title>
<style>
a:active
{
background-color:lightgreen;
}
</style>
</head>
<body>
<a href="//es.oldtoolbag.com">oldtoolbag.com</a>
<a href="//www.pcjson.com" target="_top">pcjson.com</a>
<p><b>Atención:</b>Estilo de selector :active se activa cuando se hace clic en el enlace de la página</p>
</body>
</html>Prueba aquí ‹/›:active agrega estilos especiales a los enlaces activos.
Cuando haces clic en un enlace, se convierte en un enlace activo.
Aviso: :link Selector establece el estilo de los enlaces no visitados. :visited Selector establece el estilo de los enlaces visitados. :hover Selector para estilo de enlace cuando el ratón está suspendido sobre él.
Atención: ¡Para producir el efecto esperado, :active debe estar después de :hover en la definición de CSS!
Los números en la tabla indican la versión del primer navegador que admite la propiedad.
| selector | |||||
|---|---|---|---|---|---|
| :active | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Nota:Para todos los elementos IE8y los navegadores de nueva versión también soportan el selector :active. El selector :active es para IE7Soporta solo enlaces.
Tutorial CSS: Enlaces CSS
Tutorial CSS: Pseudoclases CSS
Enlaces activos, visitados, no visitados o cuando hay un ratón suspendido sobre ellos:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guía básica(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>Guía básica(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>Mueve 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í ‹/›