CSS伪类选择器(锚点伪类、行为伪类)

最新推荐文章于 2024-09-02 00:04:08 发布

AnyBisks

最新推荐文章于 2024-09-02 00:04:08 发布

阅读量1.4k

点赞数

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

本文链接：https://blog.csdn.net/AnyBisks/article/details/78509028

版权

前端css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS伪类选择器

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>stu3-5 伪类选择器</title>
		<link rel="stylesheet" href="../css/stu3-5.css" />
	</head>
	<body>
		<div class="a-div">
			<a class="a-href" href="https://www.baidu.com/">点击我</a>
			<input type="text" name="" id="in" value="" />
		</div>
	</body>
</html>

CSS代码

/*锚点伪类link：在链接中设置链接没有被访问前的颜色为灰色*/
a:link{
	color: gray;
}

/*锚点伪类visited：在链接中设置链接没有被访问前的颜色为灰色*/
a:visited{
	color: yellow;
}

.a-div{
	background-color: antiquewhite;
}
.a-href{
	font-size: 24px;
	color: red;
}
			
/*行为伪类hover：在用户把鼠标悬浮在元素上的样式*/
a:hover{
	color: green;
}

/*行为伪类active：在用户把鼠标左键点击在元素上的样式*/
a:active{
	color: blue;
}

/*行为伪类focus：在元素作为输入焦点时的样式*/
input:focus{
	border-color: orange;
	color:red
}

/*行为伪类fbefore：在元素作为输入焦点时的样式*/
a:before{
	content:"我将访问：";
}

/*行为伪类after：在元素作为输入焦点时的样式*/
a:after{
	content:"，访问结束了";
}