CSS選擇器權重計算

2022-08-17 21:57:18 字數 512 閱讀 6935

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) + .link(10) + .active(10) = 120

顯然,下面的權重比上面的高,那麼如果有相同的樣式屬性,下面的會覆蓋掉上面的

需要注意的是,如果有:

#id.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11

即使下面的算出來的值要比上面的大,但是上面的優先順序依然比下面的高

補充:!important 的優先順序最高;

內聯樣式比在樣式表寫的樣式優先順序高;

相同權重的後寫的優先順序更高

CSS 選擇器權重計算規則

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

css選擇器的權重計算

其實,css有自己的優先順序計算公式,而不僅僅是行間 內部 外部樣式 id class 元素。一 樣式型別 1 行間 2 內聯 3 外部 二 選擇器型別 1 id id 2 class class 3 標籤 p 4 通用 5 屬性 type text 6 偽類 hover 7 偽元素 first l...

CSS 選擇器權重計算規則

其實,css有自己的優先順序計算公式,而不僅僅是行間 內部 外部樣式 id class 元素。一 樣式型別 1 行間 2 內聯 3 外部 二 選擇器型別 1 id id 2 class class 3 標籤 p 4 通用 5 屬性 type text 6 偽類 hover 7 偽元素 first l...