CSS層疊機制

GISChen發表於2018-06-07

css中為什麼要有層疊機制

因為在css中可能會有多個樣式同時影響同一個元素的某個屬性,層疊機制可以解決作者(寫程式碼的人),使用者(瀏覽頁面的人)和使用者代理(一般指瀏覽器)的樣式衝突。

在層疊中每個樣式規則都有一個權重值,當其中幾條規則同時生效時,權重最大的規則優先。一般來說作者指定的樣式權重值高於使用者樣式權重值,使用者樣式權重高於客戶端(使用者代理)權重值。一般權重值跟物件,是否有!important,特異度和位置先後有關。在層疊順序中,以下權重值從小到大

(1)使用者代理樣式

(2)使用者一般樣式

(3)作者一般樣式

(4)作者重要樣式(!important)

(5)使用者重要樣式(!important)

(6)如果是兩個樣式來自相同的程式碼,如都來自作者(程式碼),並且它們的樣式宣告同樣重要,則根據特異度來計算,特異度高的會覆蓋特異度低的

(7)如果特異度也相同,則越往後的樣式優先順序越高

為什麼使用者設定的重要樣式比作者重要樣式優先順序高,這樣做的原因是為了方便使用者實現一些特殊的要求,例如頁面字型大小的調整等。

選擇器特異度的計算

(1)如果一個宣告出現在元素的style屬性中,則將a計為1;

(2)b等於選擇器中所有ID選擇器加起來的數量和

(3)c等於選擇器中所有class選擇器和屬性選擇器,以及偽類選擇器加起來的數量和

(4)d等於選擇器中所有標籤選擇器和偽元素選擇器加起來的數量和

a-b-c-d即是選擇器的特異度,比較順序從a先比起,誰先大則優先順序就越高

注意:

  • 繼承的優先順序最低,沒有特異度
  • 結合符(如+,>)及通用選擇符(*)特異度為0
.box{} /*特異度=0,0,1,0*/
.box div{} /*特異度=0,0,1,1*/
#nav li{} /*特異度=0,1,0,1*/
p:first-line{} /*特異度=0,0,0,2*/
style="" /*特異度=1,0,0,0*/

相關文章