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

CSS 選擇器權重計算與優先級

#box .text { /*100*/

width: 300px;

height: 300px;

background: yellow;

}

CSS 選擇器權重計算與優先級

2.id選擇器背景屬性后+!import絕對優先。

CSS 選擇器權重計算與優先級

#box .text { /*100*/

width: 300px;

height: 300px;

background: yellow!important;

}

CSS 選擇器權重計算與優先級

3.當class選擇器權值110大于id選擇器權值100時，優先級高的優先！

#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 選擇器權重計算與優先級

本文地址：https://blog.csdn.net/m0_51734506/article/details/111145406

總結

以上是生活随笔為你收集整理的html选择器优先级如何计算,CSS选择器权重计算与优先级的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。