CSS層疊機制的示例分析

這篇文章主要為大家展示了“CSS層疊機制的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS層疊機制的示例分析”這篇文章吧。

css中為什么要有層疊機制

因為在css中可能會有多個樣式同時影響同一個元素的某個屬性，層疊機制可以解決作者（寫代碼的人），用戶（瀏覽頁面的人）和用戶代理（一般指瀏覽器）的樣式?jīng)_突。

在層疊中每個樣式規(guī)則都有一個權(quán)重值，當(dāng)其中幾條規(guī)則同時生效時，權(quán)重最大的規(guī)則優(yōu)先。一般來說作者指定的樣式權(quán)重值高于用戶樣式權(quán)重值，用戶樣式權(quán)重高于客戶端（用戶代理）權(quán)重值。一般權(quán)重值跟對象，是否有！important,特異度和位置先后有關(guān)。在層疊順序中，以下權(quán)重值從小到大

（1）用戶代理樣式

（2）用戶一般樣式

（3）作者一般樣式

（4）作者重要樣式（！important）

（5）用戶重要樣式（！important）

（6）如果是兩個樣式來自相同的代碼，如都來自作者（代碼），并且它們的樣式聲明同樣重要，則根據(jù)特異度來計算，特異度高的會覆蓋特異度低的

（7）如果特異度也相同，則越往后的樣式優(yōu)先級越高

為什么用戶設(shè)置的重要樣式比作者重要樣式優(yōu)先級高，這樣做的原因是為了方便用戶實現(xiàn)一些特殊的要求，例如頁面字體大小的調(diào)整等。

選擇器特異度的計算

（1）如果一個聲明出現(xiàn)在元素的style屬性中，則將a計為1；

（2）b等于選擇器中所有ID選擇器加起來的數(shù)量和

（3）c等于選擇器中所有class選擇器和屬性選擇器，以及偽類選擇器加起來的數(shù)量和

（4）d等于選擇器中所有標(biāo)簽選擇器和偽元素選擇器加起來的數(shù)量和

a-b-c-d即是選擇器的特異度，比較順序從a先比起，誰先大則優(yōu)先級就越高。

注意：

1. 繼承的優(yōu)先級最低，沒有特異度

2. 結(jié)合符（如+，>）及通用選擇符（*）特異度為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*/

以上是“CSS層疊機制的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！