CSS权重揭秘-CSDN博客

很多CSS的初学者觉得CSS的权重计算问题令人头疼，其实权重计算问题是有窍门的。下面这是一个很有意思的比较权重的代码，读者不妨猜猜输出的会是什么颜色。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>权重计算</title>
	<style type="text/css">
		#box1 .he2 p {
			color:red;
		}
		div div #box3 p{
			color:yellow;
		}
		div.he2.he3 p {
			color:blue;
		}
	</style>
</head>
<body>
	<div class="he1" id="box1">
		<div class="he2" id="box2">
			<div class="he3" id="box3">
				<p>权重计算，如果都选中了按优先级的高低选择，id，class，html.</p>
			</div>
		</div>
	</div>
</body>
</html>

运行结果：权重计算，如果都选中了按优先级的高低选择，id，class，html.

原因就是输出的那句话，当有多个选择器的时候，系统会根据优先级的大小排序，比如第一个选择器就是1一个id,1个class,1个Html标签，而第二个选择器，则是1个id，0个class，3个html标签，所以第一个是大于第二个的，第三个是0个id，2个class，2个html标签，优先级自然也是最小的，就好比是111>103>023,这样就比较好理解了。

如果权重计算结果一样怎么办呢？这时候又有另外一个规则：如果权重一样，那么后出现的会覆盖掉先出现的。看下面这段代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>权重计算2</title>
	<style>
		#box1 #box2 p {
			color: red;
		}

		#box2 #box3 p {
			color: blue;
		}
	</style>

</head>
<body>
	<div class="hezi1" id="box1">
		<div class="hezi2" id="box2">
			<div class="hezi3" id="box3">
				<p>计算权重的第二步: 如果权重一样，那么后出现的会覆盖掉先出现的。</p>
			</div>
		</div>
	</div>


</body>
</html>

这里的运行结果会变成蓝色的。这是因为第二个是后出现的，权重要大于第一个。

这里还有一个有趣的问题，请看下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#hezi2 #hezi3 {
			color: green;
		}
		#hezi1 #hezi2 {
			color: red;
		}


	</style>
</head>
<body>
	<div class="box" id="hezi1">
		<div class="box" id="hezi2">
			<div class="box" id="hezi3">
				<p>猜猜我是什么颜色？</p>
			</div>
		</div>
	</div>
</body>
</html>

运行结果：猜猜我是什么颜色？

为什么会是绿色呢？

权重比较第四步：如果都没有选中，那么谁离目标元素近就听谁的

他们都没有选择到最精确的<P>标签那么看离得最近的。

关于CSS权重问题还有很多有意思的问题，往后的学习中应该多多注意权重问题的陷阱。