【H5/CSS】简单了解选择器的优先级

2022-08-06 14:00:08 阅读：198 来源： 互联网

标签：优先级 color H5 样式 background div 选择器 CSS

样式的冲突

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。

案例一：使用类选择器与元素选择器选中同一元素，设置不同颜色

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

			div {
				color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<div class="red">我是一个div</div>
	</body>
</html>

可以看到红色优先

选择器的权重

这是因为发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定，谁前面位数越前，则谁越优先，可以看到类选择器优于元素选择器。

选择器	权重
内联样式	1,0,0,0
id选择器	0,1,0,0
类和伪类选择器	0,0,1,0
元素选择器	0,0,0,1
通配选择器	0,0,0,0
继承的样式	没有优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）,说白就是看谁写得越长，就越优先。

案例二：元素与id选择器进行复合，跟只使用id选择器比较

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			#box1 {
				background-color: orange;
			}

			div#box1 {
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="box1">我是一个div</div>
	</body>
</html>

注意点：

选择器的累加不会超过其最大的数量级，比如类选择器再高（有11个）也不会超过id选择器

案例三：同一个选择器优先级比较

如果同一个选择器优先级计算后相同，此时则优先使用靠下的style样式

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			.box2 {
				background-color: yellow;
			}

			.box1 {
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="box1 box2">我是一个div</div>
	</body>
</html>

使用`!important`

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，但是在开发中这个玩意一定要慎用！因为一旦确定好优先级，就不方便更改

.box2 {
    background-color: yellow !important;
}

.box1 {
    background-color: orange;
}

参考

视频链接（P39）
尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通

标签：优先级,color,H5,样式,background,div,选择器,CSS
来源： https://www.cnblogs.com/PaturNax/p/16556965.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9