css 层叠性统计权重优先级问题

最新推荐文章于 2021-07-11 16:14:56 发布

dreamer_zhou

最新推荐文章于 2021-07-11 16:14:56 发布

阅读量601

点赞数 1

分类专栏： CSS 文章标签： css 权重层叠性优先级图解

本文链接：https://blog.csdn.net/wq_zhou/article/details/78028584

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、层叠性：

当同一个元素被两个或多个选择器选中时，css会根据选择器的权重来决定使用哪一个选择器，权重低的会被权重高的层叠

2、统计权重：

权重大小：id选择器 > 类选择器 > 标签选择器

图解：

3、图2红色字体疑问处，权重问题代码实战：

代码1：不同的选择器没有定位到元素，但都定位到了同一个标签层（权重为0）。假设有权重，权重不同时，权重大的为准：
代码2：假设有权重，权重相同时，就近原则（css选择器从上到下以下面选择器为准）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
		#box3 {
				color: red;
			}
		.box2 .box3 {
			color: blue;
		}
		
	</style>
</head>

<body>
	<div id="box1" class="box1">
		<div id="box2" class="box2">
			<div id="box3" class="box3">
				<p>猜猜我是什么颜色</p>
			</div>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
		.box2 #box3 {
				color: red;
			}
		#box2 .box3 {
			color: blue;
		}
		
	</style>
</head>

<body>
	<div id="box1" class="box1">
		<div id="box2" class="box2">
			<div id="box3" class="box3">
				<p>猜猜我是什么颜色</p>
			</div>
		</div>
	</div>
</body>
</html>