CSS优先级

最新推荐文章于 2024-08-11 23:43:12 发布

端脑

最新推荐文章于 2024-08-11 23:43:12 发布

阅读量293

点赞数

分类专栏：前端文章标签： CSS优先级

本文链接：https://blog.csdn.net/qq_43776742/article/details/97806681

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

优先级

id选择器 > class选择器 > 标签选择器
注意特殊情况:
- 行内样式优先
- css定义了一个命令!important,该命令赋予最大的优先级
- 继承样式权重为0
- 权重相同,css遵循就近原则，谁靠近元素的样式具有最大的优先级

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   /* 1 0 0*/
	   #chijie {
	  	color: blue;
	  }
       
       /*0 0 1*/
	  div:first-child {
	  	  color: gray;
	  }

	 
      /*0 1 0*/
	  .chicken {
	  	  color: green;
	  }
       
      /*0 0 1*/ 
	  div {
	  	  color: purple;
	  }



	</style>
</head>
<body>
	<div class="chicken" id="chijie">我爱吃鸡</div>
</body>
</html>

总结

首先观看选择器是否直接选中作用的元素还是通过继承影响作用的元素
假如不是继承则按照权重的计算公式（id选择器个数 class选择器个数标签选择器个数），假如三个选择器个数都一样，则就近原则（排在最后的优先级最大）
假如都是继承的,谁描述的近(结构层级)就听谁的,当描述结构层级一样，则依次比较id选择器数量 class选择器数量标签选择器数量,假如三种选择器数量也一样，就近原则(位置就近)