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...