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
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 >總結
以上是生活随笔為你收集整理的CSS选择器权重计算与优先级的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java对arrayList按数字大小逆
- 下一篇： 华为网络工程师-了解华为交换机的接口类型