CSS選擇器權重計算規則
優先順序就是分配給指定的CSS宣告的一個權重,它由 匹配的選擇器中的 每一種選擇器型別的 數值 決定。
而當優先順序與多個CSS宣告中任意一個宣告的優先順序相等的時候,CSS中最後的那個宣告將會被應用到元素上。
當同一個元素有多個宣告的時候,優先順序才會有意義。因為每一個直接作用於元素的CSS規則總是會接管/覆蓋(take over)該元素從祖先元素繼承而來的規則。
選擇器型別
選擇器可以分成幾個大類
①基本選擇器
基本選擇器是我們用的最多的選擇器,包括:
1.元素(型別)選擇器
2.類選擇器
3.ID選擇器
4.通用元素選擇器②組合選擇器
組合選擇器包含了是包含了簡單選擇符的組合方式,包括:1.群組選擇器
語法: 選擇器A,選擇器B{樣式規則}
作用:對N個選擇器獲取的dom元素應用同一個樣式,減少重複程式碼。
例如:
div,body{width: 1200px;}
2.後代選擇器(派生選擇器)
語法: 父選擇器 後代選擇器{樣式規則}
作用:對父類元素中所有子代元素應該樣式規則
例如:
body div{color: #888;}
3.子元素選擇器(派生選擇器)
語法: 父選擇器 > 子元素選擇器{樣式規則}
作用:對父類元素的直接子元素應該樣式規則
例如:
body > div{color: #888;}
4.相鄰兄弟元素選擇器
語法: 選擇器A + 選擇器B {樣式規則}
作用:可選擇緊接在另一元素後的元素,且二者有相同父元素
用法:這個選擇器的有兩種(本質上是一種),詳細的用法點選這裡5.兄弟選擇器(派生選擇器)
語法:選擇器A ~ 選擇器B{樣式規則}
作用:對某個指定元素的後面的所有兄弟元素應用樣式規則
例如:
body ~ div{color: #888;}
③屬性選擇器
例如:[attr=value]
④偽類選擇器
例如::hover
⑤偽元素選擇器
例如::before
計算規則
1.基本規則
行內樣式 > 頁內樣式 > 外部引用樣式 > 瀏覽器預設樣式
2.組合規則
選擇器型別 | 緯度(a,b,c,d) |
---|---|
行內樣式 | 1,0,0,0 |
ID選擇器 | 0,1,0,0 |
類選擇器、屬性選擇器、偽類選擇器 | 0,0,1,0 |
元素(型別)選擇器,偽元素(型別)選擇器 | 0,0,0,1 |
通用元素選擇器、偽類:not選擇器 | 0,0,0,0 |
3.計算流程
(a)首先根據選擇器型別計算出總緯度
(b)若緯度相同則比較來源
(c)若前兩者相同,則後面宣告的優先順序高。
4.通過!important提高優先順序
通過在樣式規則後面新增!important關鍵詞,可以將該樣式規則提高到最高優先順序。(IE5.5~6不支援)
!important
不是一個優雅的辦法,而且會使得樣式難以除錯,下面是時是使用建議:
- 永遠不要在全域性CSS規則中使用;
- 永遠不要在自制的外掛中使用;
- 只在需要覆蓋全域性或外部外掛的css規則(如Extjs、YUI外掛的樣式)的特定頁面中才使用;
- 首先考慮使用優先順序來解決問題而不是!important.