13-(CSS基础)选择器优先级(权重)

最新推荐文章于 2023-10-07 13:03:51 发布

七色的天空

最新推荐文章于 2023-10-07 13:03:51 发布

阅读量96

点赞数

分类专栏： 03_CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/q506174602/article/details/129960223

版权

03_CSS 专栏收录该内容

83 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器优先级(权重)</title>
	<style>
		/*
		1.当使用不同选择器设置同一个标签的同一个样式，会根据选择器的优先级(权重)来决定最终按谁的样式显示。
			也就是优先级高的优先显示
			-- 优先级的权重规律
				行内样式		1000
				ID选择器		100
				类选择器		10
				标签选择器		1
				通配符选择器	0 

				继承来的属性	没有优先级
		 */
		* {
			color: orange;
		}
		#box1 {
			/*id选择器权重值 100*/
			color: pink   !important;
			font-size: 36px;
		}
		.box1 {
			/*类选择器权重值 10*/
			color: red;
		}
		
		

		/*12*/
		/*body div.box2 {
			color: aqua;
		}*/


		/*交集选择器*/
		div.box2 {
			/*div=== 1; .box2 === 10*/
			color: orange;
		}
		/*后代选择器*/
		div .box2 {
			color: skyblue;
		}

		.box2 {
			color: red;
		}
		div {
			/*标签选择器权重值 1*/
			color: green;
		}
		/*
		2.在元素样式后加 !important , 该元素会获得最高权重, 这个方法只是增大了元素对应css属性的权重，
		对所在的选择器没有任何影响
		注意: 一旦使用了 !important ,元素样式将会很难该改变, 即使使用js也无法修改, 慎用！！！！;
		 */
		
		/*
		 3.当选择标签包含多种选择器时，需要将多个选择器的权重相加，权重总和大的优先更高
		 注意: 并集选择器除外，注意是权重无关的那部分不算，有关的还是算的;
		*/
		/* 此时标签div不存在class名为box3的后代，所以无效 */
		div .box3 {
			font-size: 50px;
		}

		.box2, div.box3 {
			font-size: 36px;
		}
		.box3 {
			font-size: 16px;
		}
	</style>
</head>
<body>
	<div id="box1" class="box1" style="color: blue; font-size: 50px">
		<!-- /*行内样式权重值 1000*/ -->
		我是div盒子
		<span>div盒子中的span</span>
		<!-- span内容的颜色为什么变了, 因为span本身是继承div的样式, 没有优先级；
		而通配符选择器的权重值是0，不是没有优先级, 所以会优先执行通配符的样式 -->
	</div>
	

	<div class="box2">
		太阳当空照
	</div>

	<div class="box3">
		box3333
	</div>


	<!-- 
	div .box2 {
	
	}
	 -->
	}
	<div>
		<div class="box2">
			
		</div>
		<p class="box2"></p>
		<span class="box2"></span>
	</div>
</body>
</html>

上述运行结果：