HTML 开发之选择器的优先级顺序

最新推荐文章于 2024-04-18 18:54:24 发布

启之灵

最新推荐文章于 2024-04-18 18:54:24 发布

阅读量2.2k

点赞数 1

分类专栏： Html 5 文章标签：选择器的优先级

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/82085380

版权

Html 5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				background-color: red;
			}
			.P2{
				background-color: green;
			}
			#d1{
				background-color: yellow;
			}
			/*
			 * 当不同选择器设置同一个元素的同一个属性的时候会产生冲突，这是就要考虑选择器的优先级顺序了；
			 *   内联样式的优先级是 			1000；
			 * 	 id选择器的优先级是			100；
			 * 	 类和伪类选择器的优先级是		10；
			 * 	元素选择器的优先级是			1；
			 * 	通配*选择器的优先级是			0；
			 * 	继承的样式选择器 			-1；
			 * 
			 * 并集选择器的优先级是单独计算元素的优先级；不会混淆在一起计算；
			 */
			
			
			/*
			 * 当多条件的选择器的时候需要将多个条件的优先级相加才能得到最终的优先级；
			 */
			p#p2{
				background-color: orange;
			}
			
			
			/**
			 * 当一个属性有多个class的时候，后面的定义的选择器生效；
			 */
			.c1{
				background-color: orange;
			}
			
			.c2{
				background-color: yellowgreen;
			}
			
		</style>
	</head>
	<body>
		<p class="P2"
			 id="d1" 
			 style="background-color: blue;">
			 wo  shi  yi  ge  duan luo
		</p>
		
		<p id="p2">我是一个段落</p>
		<p class="c1 c2">我是一个段落</p>
	</body>
</html>

超链接的伪类选择器的优先级：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 其实超链接的四中伪类选择器：
			 * link
			 * visited
			 * hover
			 * active
			 * 这四种本身是没有优先级的，所有在写的顺序上要特别的注意，不然现在后面的会其效果；
			 * 
			 */
			a:link{
				color: red;
			}
			a:visited{
				color: orange;
			}
			
			/*
			 * hover
			 * active
			 * 这两种状态可能会冲突，所以一定要注意编写的顺序才行；
			 */
			a:hover{
				color: green;
			}
			a:active{
				color: blue;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">baidu</a>
		<br />
		<br />
		<a href="http://www.baidu.com11">baidu111</a>
	</body>
</html>