CSS 伪类

原创于 2010-08-13 09:38:55 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #jQuery #JavaScript #HTML #ViewUI

技术类专栏收录该内容

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>