a标签的那些个伪类

最新推荐文章于 2024-09-24 23:10:31 发布

农夫阿才

最新推荐文章于 2024-09-24 23:10:31 发布

阅读量1.1k

点赞数 2

分类专栏： # HTML 文章标签： a标签伪类 html 选择器

本文链接：https://blog.csdn.net/weixin_42512488/article/details/85109739

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.a标签的几种状态

a 标签应该有几种状态呢？从它的作用我们可以分析出，我想知道这个超链接点过没有，就存在两种状态， a:link 表示点击过， a:visited表示已访问过。在浏览京东、淘宝的时候，我们还可以发现，当鼠标悬浮在某个标签上，它会变大，这种鼠标悬浮在超链接的状态为 a:hover
2.a:link的使用

<html>
<head> 
<style type="text/css">
	a:link{color:red;}
</style>
</head>
<body>
	<a href="#">111111</a>
    <a href="#">22222</a>
</body>
</html>

运行结果：
在这里插入图片描述

3.a:visited 的使用

<html>
<head> 
<style type="text/css">
	a:visited{color:red;}
</style>
</head>
<body>
	<a href="http://www.baidu.com">百度一下</a>
</body>
</html>

运行结果：
（访问过之后）
在这里插入图片描述

4.a:hover的使用

<html>
<head> 
<style type="text/css">
	a:hover{
		border-bottom:red solid 3px;
		padding-bottom: 10px;
	}
</style>
</head>
<body>
	<h1 style="color:black;cursor:pointer;" 
	onclick="location='http://www.baidu.com';"
	onmouseover="this.style.color='blue';"
	onmouseout="this.style.color='black';">	太阳系地球</h1>
	<a href=" ">太阳系地球</a>
</body>
</html>

运行结果：
（悬浮在第一个标题字）
在这里插入图片描述
（悬浮在第二个标题字）

5.a:active的使用

<html>
<head> 
<style type="text/css">
	a:active{color:yellow; font-size:33px;}
</style>
</head>
<body>
	<a href="#">百度一下</a>
</body>
</html>

运行结果：
（鼠标点击上去不松开左键之后的效果）
在这里插入图片描述

6.注意：要注意hover放在link和visited之后，不然会没有效果。