技巧篇 css選擇器權重計算

2021-10-06 05:49:52 字數 1207 閱讀 7665

!import >行內樣式》id選擇器》class選擇器》標籤選擇器》通配選擇器》

如何正確理解優先順序關係

共分為4個等級在簡單的按照比例關係能夠處理常用的選擇權重問題:

第一等:代表內聯樣式,如: style="***",權值為1000。

第二等:代表id選擇器,如:#content,權值為100。

第三等:代表類,偽類和屬性選擇器,如.content,:hover,[attribute],權值為10。

第四等:代表元素選擇器和偽元素選擇器,如div,p,權值為1。

如何正確解釋權重

如果宣告來自於「style」屬性,而不是帶有選擇器的規則,則記為 1,否則記為 0 (= a)(html元素的style屬性也是樣式規則,因為這些樣式規則沒有選擇器,因此記為a=1,b=0,c=0,d=0)

計算選擇器中 id 屬性的個數 (= b)

計算選擇器中其他屬性(類、屬性選擇器)和偽類的個數 (= c)

計算選擇器中元素名稱和偽元素的個數 (= d)

將四個數字按 a-b-c-d 這樣連線起來(位於大數進製的數字系統中),構成選擇器的優先順序。

在最新的selector level 3規範中:

計算選擇器中 id 屬性的個數 (= a)

計算選擇器中其他屬性(類、屬性選擇器)和偽類的個數 (= b)

計算選擇器中元素名稱和偽元素的個數 (= c)

忽略通用選擇器*

將三個數字按 a-b-c這樣連線起來(位於大數進製的數字系統中),構成選擇器的優先順序。style屬性計算參考css2.1規範。

問題:1、選擇器的整體優先順序如何計算,是像網上說的a1000+b100+c*10+d嗎?

答:不是。這種回答明顯是望文生義。四級(a、b、c、d)之間並不是簡單的相加關係。同一級(例如:a對a)的才具有可比關係。

分析:以下為webkit的webcore中關於優先順序計算的**(

複製**

unsigned cssselector::specificity() const

return total;結論:

1、優先順序計算時跨級相加應注意溢位問題;

2、優先順序計算不包括inline style和!important(最高優先,權重無窮大);

3、優先順序計算只有同一類別才具有可比性(一般也不會有人定義超出255個的同一選擇器)。

CSS選擇器權重計算

css各種選擇器的權重 1.id選擇器 100 2.類 屬性 偽類選擇器 10 3.元素 偽元素選擇器 1 4.其他選擇器 0 如果有兩個css樣式都作用於某元素,如 id link a href id 100 link 10 a 1 href 0 111 id link.active id 100...

CSS補充篇 css選擇器權重計算問題

在開發過程中,編寫css樣式時,會有css屬性和選擇器的優先順序問題。因此我們需要了解內部結構和原理才能達到自己想要的效果。首先你需要了解每個選擇器的權重值是多少,如果您不知道,下方鏈結跳轉到另外一篇部落格中,尋找到選擇器權重表進行檢視 css基礎篇選擇器權重 就單論css權重這個知識點,據說有很多...

CSS 選擇器權重計算規則

下面從網易 規範中摘抄的內容,學習他們確定選擇器等級的方式。最近看了 精通css 這部分內容應該是從2.3節摘抄來的。選擇器等級 a 行內樣式style。b id選擇器的數量。c 類 偽類和屬性選擇器的數量。d 型別選擇器和偽元素選擇器的數量。選擇器等級 a,b,c,d style 1,0,0,0 ...