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