【H5/CSS】简单了解选择器的优先级

  • 【H5/CSS】简单了解选择器的优先级已关闭评论
  • 11 次浏览
  • A+
所属分类:Web前端
摘要

可以看到红色优先
这是因为发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定,谁前面位数越前,则谁越优先,可以看到类选择器优于元素选择器。


样式的冲突

  • 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突。

案例一:使用类选择器与元素选择器选中同一元素,设置不同颜色

<!DOCTYPE html> <html lang="en"> 	<head> 		<meta charset="UTF-8" /> 		<title>Document</title> 		<style> 			.red { 				color: red; 			}  			div { 				color: yellowgreen; 			} 		</style> 	</head> 	<body> 		<div class="red">我是一个div</div> 	</body> </html>  

可以看到红色优先
【H5/CSS】简单了解选择器的优先级

选择器的权重

这是因为发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定,谁前面位数越前,则谁越优先,可以看到类选择器优于元素选择器。

选择器 权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级

比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器是单独计算的),说白就是看谁写得越长,就越优先。

案例二:元素与id选择器进行复合,跟只使用id选择器比较

<!DOCTYPE html> <html lang="en"> 	<head> 		<meta charset="UTF-8" /> 		<title>Document</title> 		<style> 			#box1 { 				background-color: orange; 			}  			div#box1 { 				background-color: yellow; 			} 		</style> 	</head> 	<body> 		<div id="box1">我是一个div</div> 	</body> </html> 

【H5/CSS】简单了解选择器的优先级

注意点:

选择器的累加不会超过其最大的数量级,比如类选择器再高(有11个)也不会超过id选择器

案例三:同一个选择器优先级比较

如果同一个选择器优先级计算后相同,此时则优先使用靠下的style样式

<!DOCTYPE html> <html lang="en"> 	<head> 		<meta charset="UTF-8" /> 		<title>Document</title> 		<style> 			.box2 { 				background-color: yellow; 			}  			.box1 { 				background-color: orange; 			} 		</style> 	</head> 	<body> 		<div class="box1 box2">我是一个div</div> 	</body> </html>  

【H5/CSS】简单了解选择器的优先级

使用!important

可以在某一个样式的后边添加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式,但是在开发中这个玩意一定要慎用!因为一旦确定好优先级,就不方便更改

.box2 {     background-color: yellow !important; }  .box1 {     background-color: orange; } 

【H5/CSS】简单了解选择器的优先级

参考

视频链接(P39)
尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通