css-选择器的优先级

2021/9/4 23:37:54

编程Tag： 选择器 css 样式优先级 background color 外联 P2

本文主要是介绍css-选择器的优先级，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

css样式在html中有三种存在形态：

内联样式: <div style="display: none"></div>
内部样式: <style></style>
外联样式: <link href="" />

　　三者的优先级为：内联样式>内部样式>外联样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p1{
				background-color: yellow;
			}
			p{
				background-color: red;
			}
			#p2{
				background-color: #006400;
			}
			p#p2{
				background-color: #9ACD32;
			}
		</style>
	</head>
	<body>
		<!--
		   当使用不同的选择器，选中同一个元素时兵设置相同的样式时，这时
		   样式之间产生了冲突，最终到底采用那个选择器定义的样式，由选择器
		   的优先级（权重）优先级高的优先显示。
		   
		   优先级规则:
		       内联样式，  优先级 1000
			   id选择器，  优先级 100
			   类和伪类，  优先级 10
			   元素选择器，优先级 1
			   通配*，    优先级 0
			   继承的样式，没有优先级
			   
			当选择器中包含多中选择器时，需要将多种选择器的优先级相加然后比较，
			  但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，
			  则使用靠后的样式。
			
			并集选择器的优先级是单独计算
			div , p , #p1 , .hello{}
			
			可以在样式的最后，添加一个!important,则此时该样式将会获得一个最高的优先级，
			将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用 !important
			
		-->
		<p class="p1">我是一个段落</p>
	</body>
</html>

这篇关于css-选择器的优先级的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

css-选择器的优先级

相关编程文章