Web前端，CSS不同选择器的优先级、 CSS权重叠加计算-CFANZ编程社区

前言

持续总结输出中，今天分享的是Web前端，CSS不同选择器的优先级、 CSS权重叠加计算

css优先级的介绍

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

css的优先级公式:

• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意点:

权重叠加计算

场景:
如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式:
(每一级之间不存在进位)

在这里插入图片描述

比较规则:

先比较第一级数字，如果比较出来了，之后的统统不看
如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
…
如果最终所有数字都相同，表示优先级相同，则比较层叠性(谁写在下面，谁说了算!

注意点:

权重叠加计算案例

权重计算步骤:

先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
通过权重计算公式，判断谁权重最高

注意点:

参考代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>普通权重</title>
	<style>
		/* (行内, id, 类, 标签) */
		/* !important 最高 */
		/* 继承: 最低 */

		/* (0, 2, 0, 0) */
		#father #son {
			color:blue; 
		} 
		
		/* (0, 1, 1, 1) */
		#father p.c2 {
			color:black;
		} 
		
		/* (0, 0, 2, 2) */
		div.c1 p.c2 {
			color:red;
		} 

		/* 继承, 最低 */
		#father { 
			color:green !important;
		} 

		/* 继承, 最低 */
		div#father.c1 {
			color: yellow ;
		} 

	</style>
</head>
<body>
	<div id="father" class="c1">
		<p id="son" class="c2">
			这行文本是什么颜色的？ 
		</p>
	</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>权重叠加中每位不存在进制</title>
	<style>
		/* (行内, id, 类, 标签) */
		div div div div div div div div div div div div {  
			color: red;
		}
		
		.one { 
			color: pink;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<div>
				<div>
					<div>
						<div>
							<div>
								<div>
									<div>
										<div>
											<div>
												<div class="one">这行文字是什么颜色的？</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>权重相同时比较层叠性</title>
	<style>
		/* (0, 0, 2, 1) */
		.c1 .c2 div { 
			color: blue;
		}
		
		/* (0, 1, 0, 1) */
		div #box3 {
			color:green;
		}
		
		/* (0, 1, 0, 1) */
		#box1 div {
			color:yellow;
		}
	</style>
</head>
<body>
	<div id="box1" class="c1">
		<div id="box2" class="c2">
			<div id="box3" class="c3">
				这行文本是什么颜色的？
			</div>
		</div>
	</div>
</body>
</html>

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>全是继承的特殊情况</title>
	<style>
		/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */

		/* 继承 */
		div p {
			color:red;
		} 

		/* 继承 */
		.father {
			color:blue;
		} 
	</style>
</head>
<body>
	<div class="father">
		<p class="son"> 
			<span>文字</span>
		</p>
	</div>
</body>
</html>