css样式的优先级_让继承的样式优先级大于本身的样式-CSDN博客

本文链接：https://blog.csdn.net/qq_45821251/article/details/108953669

css样式选择优先级
在遇到css设置同一个标签的同一个样式的时候，哪个优先级高就执行哪个选择(1000级最高)

1000级：内联样式(即写在页面或者标签里面的样式 直接写在标签里面的优先级更高)
100级：id选择器
10级：类和伪类
1级：元素选择器
0级：*通配选择器
没有优先级：继承的样式

当选择器包含多种选择器时，需要将多种选择器的优先级相加然后进行比较大小，大的级数更高。

但是，选择器的优先级计算不会超过他的最大数量级，比如，本来类和伪类优先级是10的不可能10个加到一起变成100，这个最多加到90

如果选择器的优先级一样，则使用靠后的选择器的样式

并集选择器的优先级是单独计算的，就比如
div,p,#p1,.hello{}他这个是单独计算，不会优先级相加，即div算dv的，p算p的，#p1算#p1的，.hello算.hello的各不干扰

可以给选择器中具体的某一个样式添加!important来改变优先级，当添加了这个，就跟吃了奥利给一样，一飞冲天，优先级超过所有的样式

.p1{
		color:yellow;
		background: honeydew !important;
	}

写在样式后面

<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.p1{
			color:yellow;
			background: honeydew !important;
		}
		</style>
	</head>
	<body>
		<p class="p1" style="color: blue; background: black;">啊！</p>
	</body>

当然!important改变的只是某个具体的样式的优先级，不能改变整个选择器中所有的样式的优先级，所以上面的字体颜色还是blue蓝色
开发过程中尽量避免使用这个玩意