【CSS3】设置超链接样式

最新推荐文章于 2022-07-04 08:00:00 发布

江奈河

最新推荐文章于 2022-07-04 08:00:00 发布

阅读量1.3k

点赞数 1

分类专栏： ♏ 前端文章标签： css css3 web

©江河

本文链接：https://blog.csdn.net/qq_46365857/article/details/104614251

版权

♏ 前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

超链接样式

伪类名称	说明	示例
a:link	单击访问前的超链接样式	a:link{ color: orange; }
a:visited	单击访问后的超链接样式	a:visited{ color: pink; }
a:hover	鼠标悬停其上的超链接样式	a:hover{ color: yellowgreen; }
a:active	单击未释放的超链接样式	a:active{ color: purple; }

※伪类顺序：

a:link{}
	↓
a:visited{}
	↓
a:hover{}
	↓
a:active{}

原则：“先爱后恨” love before hate

HTML Code ：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>设置超链接样式</title>
	<style type="text/css">
		a:link{ color: orange; } //设置超链接颜色为橙色
		a:visited{ color: pink; } //单击超链接后颜色为粉色
		a:hover{ color: yellowgreen; } //鼠标悬停时颜色为绿色
		a:active{ color: purple; } //单击不释放时颜色为紫色
	</style>
</head>

<body>
	<h2><a href="#">微微一笑很倾城</a></h2>
	<h2><a href="#">微微一笑很倾城</a></h2>
	<h2><a href="#">微微一笑很倾城</a></h2>
	<h2><a href="#">微微一笑很倾城</a></h2>
</body>
</html>

  Result ：
微微一笑很倾城                在这里插入图片描述
  单击超链接前和鼠标悬停时            单击超链接后和单击不释放时

  ※如果顺序颠倒，先设置a:hover，再设置a:visited，那么在浏览器中a:hover就不起作用了。
  ※在实际开发中，仅设置两种超链接样式，一种是超链接<a>标签选择器样式，另一种是鼠标悬浮在超链接上的样式，即a{}和a:hover{}。

我寻见一片海碧蓝且耀着光

大片船只航行其上都向着远方

Shared by Foriver_江河

江奈河

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【CSS3】设置超链接样式

超链接样式伪类名称说明示例a:link单击访问前的超链接样式a:link{ color: orange; }a:visited单击访问后的超链接样式a:visited{ color: pink; }a:hover鼠标悬停其上的超链接样式a:hover{ color: yellowgreen; }a:active单击未释放的超链接样式a:ac...
复制链接

扫一扫