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

注意：

• 繼承的優先級最低，沒有特異度
• 結合符（如+，>）及通用選擇符（*）特異度爲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*/