html选择器优先级如何计算,CSS选择器权重计算与优先级
CSS選擇器權(quán)重計(jì)算與優(yōu)先級(jí)
選擇器有優(yōu)先級(jí)，可以通過權(quán)重來計(jì)算優(yōu)先級(jí)。
一：優(yōu)先級(jí)
等級(jí)劃分：
第一優(yōu)先級(jí)：css屬性+!important是一種強(qiáng)制改變優(yōu)先級(jí)的方法，它會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式，它擁有最高優(yōu)先級(jí)。
第二優(yōu)先級(jí)：在html中給元素標(biāo)簽加style，即內(nèi)聯(lián)樣式。
第三優(yōu)先級(jí)：由id選擇器來定義。例如，#id{ }會(huì)覆蓋.classname{ }
第四優(yōu)先級(jí)：由class選擇器、屬性選擇器、偽類選擇器定義。如.classname{ }會(huì)覆蓋div{ }
第五優(yōu)先級(jí)：由元素選擇器、偽元素選擇器定義。如div{ }覆蓋*{ }
第六優(yōu)先級(jí)：通用選擇器，如*{ }
css屬性+!important>內(nèi)聯(lián)樣式>ID選擇器(#id)>類選擇器(.class)=偽類選擇器(：hover等)=屬性選擇器[type]>元素選擇器(p等)=偽元素選擇器>通用選擇器>繼承的樣式
優(yōu)先級(jí)規(guī)則：
同等等級(jí)情況下：
1.優(yōu)先級(jí)高的優(yōu)先。
2.優(yōu)先級(jí)相同時(shí)，則采用就近原則，選擇后定義的樣式。
3.屬性后面加 !important 時(shí)，絕對(duì)優(yōu)先。
4.繼承得來的屬性，其優(yōu)先級(jí)最低;
等級(jí)不同的情況下，優(yōu)先級(jí)高的優(yōu)先！！
二、權(quán)重：
權(quán)重概念：
某一因素或指標(biāo)相對(duì)于某一事物的重要程度，其強(qiáng)調(diào)的是因素或指標(biāo)的相對(duì)重要程度，傾向于貢獻(xiàn)度或重要性。(權(quán)重類比天秤上的砝碼)。
權(quán)重計(jì)算規(guī)則
CSS內(nèi)部是按每條樣式的權(quán)重值來計(jì)算優(yōu)先級(jí)的，各類型的選擇器所對(duì)應(yīng)的權(quán)重如下：
1.內(nèi)聯(lián)樣式，如: style="…"，權(quán)值為1000。
2.ID選擇器，如：#box，權(quán)值為0100。
3.class，偽類、屬性選擇器，如.text，權(quán)值為0010。
4.元素選擇器、偽元素選擇器，如div p，權(quán)值為0001。
5.通配符、子選擇器、相鄰選擇器等。如* > +，權(quán)值為0000。
6.繼承的樣式?jīng)]有權(quán)值
算法：權(quán)值 = 1000第一等級(jí)個(gè)數(shù) + 100第二等級(jí)個(gè)數(shù) + 10第三等級(jí)個(gè)數(shù) + 1第四等級(jí)個(gè)數(shù)；
舉例：
1.內(nèi)聯(lián)樣式style=”background:blue”權(quán)值1000大于id選擇器權(quán)值100
CSS 選擇器權(quán)重計(jì)算與優(yōu)先級(jí)#box .text { /*100*/
width: 300px;
height: 300px;
background: yellow;
}
CSS 選擇器權(quán)重計(jì)算與優(yōu)先級(jí)2.id選擇器背景屬性后+!import絕對(duì)優(yōu)先。
CSS 選擇器權(quán)重計(jì)算與優(yōu)先級(jí)#box .text { /*100*/
width: 300px;
height: 300px;
background: yellow!important;
}
CSS 選擇器權(quán)重計(jì)算與優(yōu)先級(jí)3.當(dāng)class選擇器權(quán)值110大于id選擇器權(quán)值100時(shí)，優(yōu)先級(jí)高的優(yōu)先！
#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;
}
CSS 選擇器權(quán)重計(jì)算與優(yōu)先級(jí)本文地址：https://blog.csdn.net/m0_51734506/article/details/111145406
總結(jié)
以上是生活随笔為你收集整理的html选择器优先级如何计算,CSS选择器权重计算与优先级的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
