CSS选择器权重计算与优先级
CSS选择器权重计算与优先级
选择器有优先级，可以通过权重来计算优先级。
一：优先级
等级划分：
第一优先级：css属性+!important是一种强制改变优先级的方法，它会覆盖页面内任何位置定义的元素样式，它拥有最高优先级。
第二优先级：在html中给元素标签加style，即内联样式。
第三优先级：由id选择器来定义。例如，#id{ }会覆盖.classname{ }
第四优先级：由class选择器、属性选择器、伪类选择器定义。如.classname{ }会覆盖div{ }
第五优先级：由元素选择器、伪元素选择器定义。如div{ }覆盖*{ }
第六优先级：通用选择器，如*{ }
css属性+!important>内联样式>ID选择器（#id）>类选择器（.class）=伪类选择器（：hover等）=属性选择器[type]>元素选择器（p等）=伪元素选择器>通用选择器>继承的样式
优先级规则：
同等等级情况下：
1.优先级高的优先。
2.优先级相同时，则采用就近原则，选择后定义的样式。
3.属性后面加 !important 时，绝对优先。
4.继承得来的属性，其优先级最低;
等级不同的情况下，优先级高的优先！！
二、权重：
权重概念：
某一因素或指标相对于某一事物的重要程度，其强调的是因素或指标的相对重要程度，倾向于贡献度或重要性。（权重类比天秤上的砝码）。
权重计算规则
CSS内部是按每条样式的权重值来计算优先级的，各类型的选择器所对应的权重如下：
1.内联样式，如: style="…"，权值为1000。
2.ID选择器，如：#box，权值为0100。
3.class，伪类、属性选择器，如.text，权值为0010。
4.元素选择器、伪元素选择器，如div p，权值为0001。
5.通配符、子选择器、相邻选择器等。如* > +，权值为0000。
6.继承的样式没有权值
算法：权值 = 1000第一等级个数 + 100第二等级个数 + 10第三等级个数 + 1第四等级个数；
举例：
1.内联样式style=”background:blue”权值1000大于id选择器权值100
<title> CSS 选择器权重计算与优先级</title>
<style>
#box .text { /*100*/
width: 300px;
height: 300px;
background: yellow;
}
</style>
</head >
<body >
<div id="box" >
<div id="text" style="background:blue;height:100px;">CSS 选择器权重计算与优先级</div>
</div >
</body >
2.id选择器背景属性后+!import绝对优先。
<title> CSS 选择器权重计算与优先级</title>
<style>
#box .text { /*100*/
width: 300px;
height: 300px;
background: yellow!important;
}
</style>
</head >
<body >
<div id="box" >
<div id="text" style="background:blue;height:100px;">CSS 选择器权重计算与优先级</div>
</div >
</body >
3.当class选择器权值110大于id选择器权值100时，优先级高的优先！
<style>
#text { /*100*/
width: 300px;
height: 300px;
background: pink;
}
.a b c d e f g h i j k { /*110*/
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head >
<body >
<div id="box" >
<div id="text" class="a b c d e f g h i j k">CSS 选择器权重计算与优先级</div>
</div >
</body >
本文地址：https://blog.csdn.net/m0_51734506/article/details/111145406