JAVA之html——css伪类

最新推荐文章于 2023-06-29 17:29:19 发布

Mr,helios

最新推荐文章于 2023-06-29 17:29:19 发布

阅读量119

点赞数

分类专栏： Java html

本文链接：https://blog.csdn.net/amieelingbo/article/details/107342703

版权

Java 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

CSS 伪类用于向某些选择器添加特殊的效果

首先将整体代码写出，方便后续进行对比说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com/" target="_blank">百度</a>
		<a href="https://xin.baidu.com/detail/compinfo?pid=xlTM-TogKuTwopEOU*3mxWE1FHGZmRqxVAmd&rq=es&pd=ee&from=ps" target="_blank">b站</a>
		<style type="text/css">
			a{
				height: 18px;
				cursor: pointer;
				font-size: 14px;
				line-height: 20px;
				text-decoration: none;
			}
			a:link{
				background-color: #FF5500;
			}
			a:visited{
				background-color: aqua;
			}
			a:hover{
				text-decoration: underline;
				color: #f50;
				background-color: greenyellow;
			}
			a:active{
				background-color: crimson;
				text-decoration: none;
			}
		</style>
	</body>
</html>

:link

向未被访问的链接添加样式。

a:link{
				background-color: #FF5500;
			}

在这里插入图片描述
可以看出两者明显不同的背景色，其中b站是未访问过的地址

:visited

向已被访问的链接添加样式。

a:visited{
				background-color: aqua;
			}

在这里插入图片描述
两者对比鲜明

：hover

当鼠标悬浮在元素上方时，向元素添加样式

a:hover{
				text-decoration: underline;
				color: #f50;
				background-color: greenyellow;
			}

在这里插入图片描述

：active

向被激活的元素添加样式（即鼠标点击而不松开）
eg：

a:active{
				background-color: crimson;
				text-decoration: none;
			}

在这里插入图片描述
注意：
1、若:link、:visited、:hover和:active一起使用，:hover 必须被置于 :link 和 :visited 之后，:active 必须被置于 :hover 之后，即:link -> :visited -> :hover -> :active ，简记love hate（爱恨）。