CSS層疊機制使用詳解

這次給大家帶來CSS層疊機制使用詳解，CSS層疊機制使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

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先比起，誰先大則優先順序就越高。

注意：

1. 繼承的優先順序最低，沒有特異度

2. 結合符（如+，>）及通用選擇符（*）特異度為0

.box{} /*特異度=0，0，1，0*/.box p{} /*特異度=0，0，1，1*/#nav li{} /*特異度=0，1，0，1*/p:first-line{} /*特異度=0，0，0，2*/style="" /*特異度=1，0，0，0*/

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

具體分析webpack樣式載入

前端實戰項目中20條CSS代碼使用注意事項