伪类选择器编写顺序以及注意事项

最新推荐文章于 2024-02-07 10:05:05 发布

ruo980

最新推荐文章于 2024-02-07 10:05:05 发布

阅读量1.6k

点赞数 1

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/ruo980/article/details/116323520

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>伪类选择器顺序探究</title>
	<style type="text/css">
	p:link {
		color: red;
		background-color:red;
	}
	
	p:visitd {
		color: yellow;
		background-color:yellow;
	}
	
	p:hover {
		color: blue;
		background-color:blue;
	}
	
	p:active {
		color: black;
		background-color:black;
	}
	a:link {
		color: red;
		background-color:red;
	}
	
	a:visited {
		color: yellow;
		background-color:yellow;
	}
	
	a:hover {
		color: blue;
		background-color:blue;
	}
	
	a:active {
		color: black;
		background-color:black;
	}
	</style>
</head>
<body>
	<p>这是一段文字</p>
	<a href="#">这是一个超链接</a>
</body>
<!-- 1、发生顺序link hover active visited
	 	书写顺序：link visited hover active往里夹
	 2、hover和active是对任何元素都有效，任何元素都可以有这个伪类选择器。但是link和visited这是只是针对超链接有效
 -->
</html>

1、发生顺序link hover active visited
 	书写顺序：link visited hover active 记：相比发生顺序来说，发生顺序是往里夹或者说是最后一个往前移到第二位。
 2、hover和active是对任何元素都有效，任何元素都可以有这个伪类选择器。但是link和visited这是只是针对超链接（即a标签）有效。

ruo980

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
伪类选择器编写顺序以及注意事项

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>伪类选择器顺序探究</title> <style type="text/css"> p:link { color: red; background-color:red; } p:visitd { color: yellow; background-color:yellow;
复制链接

扫一扫