学习前端的第六天

hp200105

于 2022-08-31 20:34:43 发布

阅读量63

点赞数

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/hp200105/article/details/126631487

版权

本文介绍了CSS中的四种伪类选择器：link、visited、hover和active，详细阐述了它们各自代表的鼠标与标签交互的不同状态，并通过一个示例展示了如何使用这些伪类为链接元素设置不同状态下的样式。遵循CSS定义的顺序，确保a:hover在a:link和a:visited之后，a:active在a:hover之后，以实现有效样式应用。

摘要由CSDN通过智能技术生成

伪类选择器： 当前鼠标对标签的状态

1）link状态：鼠标没有访问过的状态

2）hover状态：鼠标x'f的状态

3）active状态：鼠标激活状态（鼠标点击后并没有松开的状态）

4）visited状态：鼠标已经访问过的状态（鼠标点击后并松开的状态）

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

a:active 必须被置于 a:hover 之后，才是有效的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器</title>
		<style type="text/css">
		
		/*link状态:没有访问过的状态*/
			a:link{
				font-size:24px;
				color:blueviolet;
			}
			
		/*visited:鼠标访问过的状态:点击了,并且松开的状态*/
			a:visited{
				font-size:24px;
				color:grey;
			}
			
		/*鼠标经过的状态:hover*/
			a:hover{
				font-size: 24px;
				color:red;
				text-decoration: none;
			}
		/*active:鼠标激活状态:点击了,但是没有松开*/
			a:active{
				font-size: 30px;
				color: red;
				text-decoration: underline;
			}
			
		</style>
	</head>
	<body>
		<a href="01.html">跳转链接</a>
	</body>
</html>