欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS的优先级和权重简介

程序员文章站 2022-07-03 20:13:36
权重是什么?首先权重一个相对概念,可以认作天平中的砝码,权重大的地方就会被重视(使用),当然这在权重等级相同的前提下。一:权重的等级划分:第一等级:内部样式 (style=" "),权值:1000.第二等级:ID选择器(#id),权值:100.第三等级:class、伪类、属性选择器(.class , :hover , :link , [type]),权值为:10.*伪类有::link,:visited,:hover,:active,:focus,:frist-child。 *第四等级:标签、...

权重是什么?

首先权重一个相对概念,可以认作天平中的砝码,权重大的地方就会被重视(使用),当然这在权重等级相同的前提下。

一:权重的等级划分:

  1. 第一等级:内部样式 (style=" "),权值:1000.
  2. 第二等级:ID选择器(#id),权值:100.
  3. 第三等级:class、伪类、属性选择器(.class , :hover , :link , [type]),权值为:10.
    *伪类有::link,:visited,:hover,:active,:focus,:frist-child。 *
  4. 第四等级:标签、伪元素选择器(id,name :after :before),权值为:1.

二:优先级规则:

同等等级情况下:

  1. 权值高的优先。
  2. 权值相同时后定义的优先。
  3. 属性后面加 !important 时,最优先。

等级不同的情况下,等级高的优先!!

三:权值的计算:

权值 = 1000第一等级个数 + 100第二等级个数 + 10第三等级数 + 第四等级数;***
例:

<style>
 #div div{   <!-- 权值 101 -->
	width: 100px;
	height: 100px;
	background-color:red;
}
 div .a .b .c .d .e .f .g .h .i .j div{ <!-- 权值 102 -->
	width:100px;
	height: 100px;
	background-color:blue;
}
</style>
 <div id="div">
 	<div class="a b c d e f g h i j">
		<div>
		</div>
 	</div>
 </div>

按照权值大小应该是class选择器生效,但是事实却是id选择起生效:CSS的优先级和权重简介
为了验证权值相同时,后面定义的属性生效把css代码改为:

<style>
 #div div{
	width: 100px;
	height: 100px;
	background-color:red;
}
#div div{
	width: 100px;
	height: 100px;
	background-color:blue ;
}
</style>
 <div id="div">
 	<div class="a b c d e f g h i j">
		<div>
		</div>
 	</div>
 </div>

CSS的优先级和权重简介
那如果在第一个background-color属性后加上!important呢?
CSS的优先级和权重简介
可以看到本应该被覆盖的red属性覆盖了blue。
那么如果权值等级不同的情况下,使用 !important 能否覆盖等级高的属性呢?

<style>
 #div div{
	width: 100px;
	height: 100px;
	background-color:red;
}
.a div{
	width: 100px;
	height: 100px;
	background-color:blue !important;
}
</style>
 <div id="div">
 	<div class="a b c d e f g h i j">
		<div>
		</div>
 	</div>
 </div>

CSS的优先级和权重简介
事实证明上述的三个优先级判断方式都是正确的。且!important具有最高优先级!

本文地址:https://blog.csdn.net/pink_pantise/article/details/111085338

相关标签: 笔记 css html