前端css最基本概念---选择器的优先级

最新推荐文章于 2021-08-25 12:13:16 发布

蜗牛9528

最新推荐文章于 2021-08-25 12:13:16 发布

阅读量226

点赞数 3

分类专栏： css3 文章标签： css 选择器优先级

本文链接：https://blog.csdn.net/weixin_44072077/article/details/102523234

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css在书写的过程中难免的会出现对同一个元素的属性层叠，所以css也叫层叠样式表，由此带来的优先级问题值得我们了解。

接下来看一段代码，里面主要包含了类选择器，通配选择器，id选择器，标签选择器以及行内样式，我用它们分别设置了p标签字体的颜色，接下来通过删除来观察它们的优先级

行内样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#p2{
				color: green;
			}
			*{
				color: blue;
			}
			.p1{
				color: yellow;
			}
			p{
				color: black;
			}
		</style>
	</head>
	<body>
		<p class="p1" id="p2" style="color: red;">css选择器优先级</p>
	</body>
</html>

现在字体颜色为红色，如下图。看来行内样式是其中的最高优先级。
在这里插入图片描述

id选择器

现在我们把行内样式删除，现在颜色变成了绿色，id选择器起作用了，现在是：行内样式>id选择器
在这里插入图片描述

类选择器

现在删除id选择器，我们的类选择器生效了，字体变成了黄色，现在是：行内样式>id选择器>类选择器

在这里插入图片描述

标签选择器

删除了类选择器，我们的标签选择器生效，字体为黑，行内样式>id选择器>类选择器>标签选择器

在这里插入图片描述

通配选择器

最后只剩下了通配选择器，字体为蓝色

在这里插入图片描述

得出结论：行内样式>id选择器>类选择器>标签选择器>通配选择器
但是呢仅仅掌握这些还不够，现实中往往有更复杂的情况。

复杂情况–权重值

选择器	权重值
通用选择器	0
标签选择器	1
类选择器	10
id选择器	100
行内样式	1000

当我们遇见了一个复合的选择器，例如 #p .a1 ul,它由类选择器，id选择器和标签选择器构成，它的权重就是三者权重之和，100+10+1=111
对于初学者计算这些权重可能比较麻烦，只要记住，选择范围越小越精确的复合选择器，他的优先级通常越高。

蜗牛9528

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端css最基本概念---选择器的优先级

css在书写的过程中难免的会出现对同一个元素的属性层叠，所以css也叫层叠样式表，由此带来的优先级问题值得我们了解。接下来看一段代码，里面主要包含了类选择器，通配选择器，id选择器，标签选择器以及行内样式，我用它们分别设置了p标签字体的颜色，接下来通过删除来观察它们的优先级行内样式<!DOCTYPE html><html> <head> <m...
复制链接

扫一扫