选择器的优先级问题

最新推荐文章于 2021-04-30 16:47:44 发布

PethZhang

最新推荐文章于 2021-04-30 16:47:44 发布

阅读量354

点赞数

分类专栏：笔记和案例文章标签：前端选择器优先级

本文链接：https://blog.csdn.net/PethZhang/article/details/78274298

版权

笔记和案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

选择器用数字来衡量优先级，越大优先级越大。

元素选择器：1；

类选择器：10；

伪类选择器：10；

ID选择器：100；

内联样式：1000；

当两个优先级相等时，已较近的声明为准，即为后声明的为准。

下列例子中的a:hover优先级为1+10=11，a.baidu优先级：1+10=11，所以鼠标放到该链接上是字体显示为绿色，而不会变成红色。

想要达到变成红色的效果，可将a:hover改成.baidu:hover，该优先级：10+10=20.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器优先级的问题</title>
		<style>
			a:hover{
				color: red;
			}
			a.baidu{
				color: green;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" class="baidu">百度</a>
	</body>
</html>