锚伪类的四种伪类

最新推荐文章于 2021-07-05 18:03:56 发布

boxyuan

最新推荐文章于 2021-07-05 18:03:56 发布

阅读量865

点赞数

分类专栏： Html+CSS 文章标签： html 前端 css

本文链接：https://blog.csdn.net/boxyuan/article/details/76195151

版权

Html+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

伪类：

与类选择器相似但是又有所不同

锚伪类：

<style>
			a:link
			{
				color: #2AABD2;
				font: "微软雅黑";
				font-size: 50px;
			}
		</style>

作用：给a标签设置没有访问过的样式
a:visited

a:visited
			{
				color: palevioletred;
				font: "微软雅黑";
				font-size: 30px;
			}

作用：给a标签设置访问过的样式
a:hover

a:hover
			{
				color: #000000;
				font: "微软雅黑";
				font-size: 30px;
			}

给a标签设置鼠标悬停时的样式
a:active

a:active
			{
				color:#3E8F3E;
				font: "微软雅黑";
				font-size: 30px;
			}
		</style>

作用：设置a标签激活时的样式

注意：在使用时一定遵循这样的顺序：

a:link a:visited a:hover a:active

有些锚伪类可以作用a标签上也可以作用在其他标签上：

a:link，a:visited 只能用于a标签
:hover，其他标签也可以使用这个伪类
a:active，其他标签也可以使用这个伪类

五彩导航：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				color: white;
				text-decoration: none;
				background-color: pink;
				width: 120px;
				height: 58px;
				display: inline-block;
				text-align: center;/*水平居中*/
				line-height: 58px;/*垂直居中*/
			}
			.one
			{
				background-color: paleturquoise;
			}
			.two
			{
				background-color: pink;
			}
			.three
			{
				background-color: plum;
				
			}
			.four
			{
				background-color: mediumpurple;
			}
			.one:hover
			{
				background-color: papayawhip;
			}
			.two:hover
			{
				background-color:palegreen;
			}
			.three:hover
			{
				background-color:hotpink;
			}
			.four:hover
			{
				background-color:deepskyblue;
			}
		</style>
	</head>
	<body style="text-align: center;">
		<a class="one" href="#">导航1</a>
		<a class="two" href="#">导航2</a>
		<a class="three" href="#">导航3</a>
		<a class="four" href="#">导航4</a>
	</body>
</html>

boxyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
锚伪类的四种伪类

伪类：与类选择器相似但是又有所不同锚伪类： a:link { color: #2AABD2; font: "微软雅黑"; font-size: 50px; } 作用：给a标签设置没有访问过的样式a:visiteda:visited { color: palevioletred; font: "微软雅黑";
复制链接

扫一扫