（8）CSS链接与链接伪类

最新推荐文章于 2023-12-18 19:42:34 发布

原创最新推荐文章于 2023-12-18 19:42:34 发布 · 832 阅读

0 ·

CC 4.0 BY-SA版权

CSS学习笔记专栏收录该内容

17 篇文章

订阅专栏

本文深入探讨了如何利用CSS修改网页链接的外观，包括颜色、背景、下划线及不同状态时的样式变化。

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

除非明确指定链接样式，否则大部分浏览器使用蓝色字体与下划线显示链接。这里我们学习一下用CSS控制链接的样式。常用于链接的属性如下：

1. color ：改变链接的颜色

2. background-color：突出显示链接，加背景

3. text-decoration：给链接添加下划线（也用于文本的上划线，删除线或闪烁）

我们还可以通过四个伪类控制不同状态链接的表示：

1. link : 用于正常状态的链接样式

2. visited : 用于已经访问的链接样式（只要该链接对应网址访问过即可，并不一定要是从该链接点访问）

3. hover : 用于当鼠标悬停在连接上时的样式

4. active : 用于当前激活（的链接的样式）

效果图如下：

CSS代码如下：

a {
	font-size : 20px;
	font-weight : bolder;
	text-decoration: none;
}
a:link {
	color: blue;
}
a:visited {
	color: green;
}
a:hover {
	color: #333399;
	background-color: #e9e9e9; 
	text-decoration: underline;
}
a:active {
	color: green;
	text-decoration: none;
}

HTML代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<base href="/testsmarty/templates/"></base>
		<title>CSS链接样式控制</title>
		<link rel="stylesheet" type="text/css" href="test1.css">
	</head>
	
	<body>
		<p><a href="http://www.bing.com" target="_blank" title="bing">我是已访问链接</a></p>
		<p><a href="http://www.enen.com" target="_blank" title="bing">我是未访问链接</a></p>	
		<p><a href="http://www.bing.com" target="_blank" title="bing">我是鼠标指向的链接</a></p>		
	</body>
</html>

疑问：

为什么link伪类设置了text-decoration: underline后，即使visited伪类设置了text-decoration: none，已访问过的链接仍然有下划线（该链接的其他设置为visited伪类确实为的设置）？