html css层叠样式基础（选择器的优先级）（六）

最新推荐文章于 2024-01-09 20:49:39 发布

咸鸭蛋炒饭

最新推荐文章于 2024-01-09 20:49:39 发布

阅读量987

点赞数

分类专栏： HTML5基础篇文章标签： html css 经验

本文链接：https://blog.csdn.net/u010853130/article/details/54898484

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.选择器的优先级：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			div{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			
			
			
			
			/*
				当使用不同的选择器选择同一个元素，并且设置相同的样式时，此时会发生样式的冲突
				 此时到底应用哪个样式由选择器的优先级来决定，优先级高的优先显示
				 
				选择器的优先级（权重）
				
				1. 内联样式     优先级是 1000  
				2. id选择器   优先级是    100
					#box1 {}
				3. 类和伪类选择器   优先级  10
					.b1.b2.b3.b4.b5.b6.b7.b8.b9.b10.b11 {}	
				4. 元素选择器  	优先级  1
				5. 通配选择器	优先级  0
				6. 继承的样式 	没有优先级
				
				当一个选择器中含有多个选择器时，需要将所有的选择器的优先级进行相加，然后在进行比较
					优先级高的优先显示，选择器的计算不会超过其最大的数量级
					
				如果两个选择器的优先级相同，则谁在下边就用谁	
			 * 
			 * */
			
			*{
				font-size: 80px;
			}
			
			p{
				font-size: 40px;
			}
			
			/*#d1{
				background-color: blue;
			}*/
			
			div.d2{
				background-color: skyblue;
			}
			
			.d2{
				/*
				 	如果在样式的最后添加一个!important，则该样式将会获取到最高的优先级，
				 		将会优先于所有的样式显示，但是这个东西慎用
				 * */
				/*background-color: yellow !important;*/
			}
			
			/*分组选择器的优先级都是单独计算*/
			p , div , h1 , #p1{
				
			}
			
			.d4{
				background-color: yellow;
			}
			
			.d3{
				background-color: red;
			}
			
			
			
		</style>
	</head>
	<body>
		
		<div class="d3 d4 d5" style="width: 100px; height: 100px;"></div>
		
		<hr />
		
		<div id="d1" class="d2" style="background-color: yellowgreen;" >
			
		</div>
		
		<p>我是一个p元素<span>我是p中的span</span></p>
		
	</body>
</html>