HTML——伪类选择器

最新推荐文章于 2022-10-30 19:15:26 发布

小刘小刘可爱一流

最新推荐文章于 2022-10-30 19:15:26 发布

阅读量308

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_44687512/article/details/107374736

版权

1、语法结构：

选择器：伪类{
	declaration 1;
	declaration 2;
}

2、link：只对a标签有用，向未被访问的链接添加样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color: red;
				font-family: 'vladimir script',terminal;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">baidu</a>
		
		<style>
			a:link{
				background-color: red;
			}
		</style>
	</body>
</html>

3、visited：只对a标签有用，向已被访问的链接添加样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color: red;
				font-family: 'vladimir script',terminal;
			}
		</style>	
	</head>
	<body>
		<a href="http://www.baidu.com">baidu</a>
		
		<style>
			a:visited{
				background-color: black;
			}
		</style>
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color: red;
				font-family: 'vladimir script',terminal;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">baidu</a>
		
		<style>
			a:hover{
				background-color: white;
			}
		</style>
	</body>
</html>

5、active：向被激活的元素添加样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color: red;
				font-family: 'vladimir script',terminal;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">baidu</a>
		
		<style>
			a:active{
				background-color: yellow;
			}
		</style>
	</body>
</html>

小刘小刘可爱一流

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML——伪类选择器

1、语法结构：选择器：伪类{ declaration 1; declaration 2;}2、link：只对a标签有用，向未被访问的链接添加样式。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> span{ color: red; font-family: 'vladimi
复制链接

扫一扫