CSS 伪类

最新推荐文章于 2025-06-12 23:19:00 发布

midnightvip

最新推荐文章于 2025-06-12 23:19:00 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

分类专栏：技术类文章标签： CSS jQuery JavaScript HTML ViewUI

本文链接：https://blog.youkuaiyun.com/midnightvip/article/details/83693406

技术类专栏收录该内容

17 篇文章

订阅专栏

本文通过实例详细介绍了如何使用CSS伪类为超链接定义不同状态的样式，包括正常状态、鼠标悬停状态及访问后的样式变化，实现了美观且实用的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[color=green]声明：本例转自《精通JavaScript+JQuery》[/color]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> CSS 伪类  </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
  <!--
  a{									/* 统一设置所有样式 */
	font-family:Arial;
	font-size:.8em;
	text-align:center;
	margin:3px;
	}
   a:link,a:visited{					/* 超链接正常状态、被访问过的样式 */
	color:#A62020;
	padding:4px 10px 4px 10px;
	background-color:#ecd8db;
	text-decoration:none;
	border-top:1px solid #EEEEEE;		/* 边框实现阴影效果 */
	border-left:1px solid #EEEEEE;		
	border-bottom:1px solid #717171;
	border-right:1px solid #717171;
   }
   a:hover{								/* 鼠标指针经过时的超链接 */
	color:#821818;						/* 改变文字颜色 */
	padding:5px 8px 3px 12px;			/* 改变文字位置 */
	background-color:#e2c4c9;			/* 改变背景颜色 */
	border-top:1px solid #717171;		/* 边框变换，实现"按下去"的效果 */	
	border-left:1px solid #717171;
	border-bottom:1px solid #EEEEEE;
	border-right:1px solid #EEEEEE;
   }
  -->
  </style>
 </head>

 <body>
	<a href="#">我是</a>
	<a href="#">可爱的</a>
	<a href="#">无敌的</a>
	<a href="#">牛B的</a>
	<a href="#">————</a>
	<a href="#">分割线</a>
 </body>
</html>