css样式的优先级

大大源码 • • 未分类

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蓝色
开发过程中尽量避免使用这个玩意

版权声明：本文为qq_45821251原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>