3、选择器权重（id，class，element）

jasmine_qiqi

已于 2022-04-04 10:40:49 修改

阅读量1.1k

点赞数

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

于 2022-04-04 09:53:43 首次发布

本文链接：https://blog.csdn.net/weixin_45065754/article/details/123949152

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1、不同选择器权重

选择器类型	权重值
元素选择器	1
类选择器	10
id选择器	100
!important	1000

2、相同选择器权重，后面的会覆盖掉前面的（`.title3 覆盖.title2`）

3、层级选择器：按权重累加计算（`.box #box_title > #box_title`）

4、源代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>选择器权重</title>
	<style>
		/* 1、不同选择器：id(100) > class(10) > element(1)  */
		h1 {
			color: black;
		}

		.title1 {
			color: red;
		}

		#title1 {
			color: yellow;
		}


		/* 2、相同选择器：后面的会覆盖掉前面的 */
		.title2 {
			color: antiquewhite;
		}

		.title3 {
			color: black;
		}

		/* 3、层级选择器：按权重累加计算 */
		.box #box_title {
			color: wheat;
			/* 权重：10+100 */
		}

		#box_title {
			color: red !important;
			/* 权重：100+最大 */
		}
	</style>
</head>

<body>
	<!-- 1、不同选择器 -->
	<h1 class="title1" id="title1">Hello world!</h1>
	<!-- 2、相同选择器 -->
	<h1 class="title2 title3">Kasmne</h1>
	<!-- 3、层级选择器 -->
	<div class="box">
		<h1 class="title4 title5" id="box_title">jasmine</h1>
	</div>
</body>

</html>