CSS層疊機制

justjavac 發布于2019-08-26 12:00 / 1319人閱讀

摘要：在層疊中每個樣式規則都有一個權重值，當其中幾條規則同時生效時，權重最大的規則優先。一般權重值跟對象，是否有特異度和位置先后有關。

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*/

云服務器 GPU云服務器 html按鈕層疊 html層疊順序 html 層疊懸浮 html外部層疊樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108015.html

理解層疊樣式表中的層疊機制，精準掌握元素樣式

摘要：問題在寫時，有時候會遇到瀏覽器中顯示的樣式和自己的預期不符合的情況，這是因為沒有理解的層疊機制。清楚地理解了他這三大法寶，我們就能精準的預測出每個元素在瀏覽器中的樣式了。問題：在寫CSS時，有時候會遇到瀏覽器中顯示的樣式和自己的預期不符合的情況，這是因為沒有理解CSS的層疊機制。例如文檔中有一個p元素,用內聯樣式為他設置了顏色： 2016年10月20日在CSS中又用不同的方式給...

0x584a 2019-08-29 11:27 評論0 收藏0
CSS層疊機制

摘要：在層疊中每個樣式規則都有一個權重值，當其中幾條規則同時生效時，權重最大的規則優先。一般權重值跟對象，是否有特異度和位置先后有關。 css中為什么要有層疊機制因為在css中可能會有多個樣式同時影響同一個元素的某個屬性，層疊機制可以解決作者（寫代碼的人），用戶（瀏覽頁面的人）和用戶代理（一般指瀏覽器）的樣式沖突。在層疊中每個樣式規則都有一個權重值，當其中幾條規則同時生效時，權重最大的規...

wenzi 2019-08-29 15:38 評論0 收藏0
CSS學習筆記(四) CSS優先級

摘要：為了解決沖突，確定哪條規則勝出并最終被應用，提供了三種機制繼承層疊和特指。整個檢查更新過程結束后，再將每個標簽以最終設定的樣式顯示出來。層疊規則四順序決定權重。規則三設定的樣式勝過繼承的樣式，此時不用考慮特指度即顯式設定優先。為了解決沖突，確定哪條規則勝出并最終被應用，CSS提供了三種機制：繼承、層疊和特指。 1.繼承 CSS 中的祖先元素會向后代傳遞一樣東西：CSS屬性...

高勝山 2019-08-28 18:01 評論0 收藏0
CSS規則的繼承與層疊

摘要：我們知道字體屬性在任意時刻都只能應用一種設定那此時該應用哪種字體呢為解決類似的沖突確定哪條規則勝出并最終被應用提供了三種機制繼承層疊和特指。層疊規則層疊規則一找到應用給每個元素和屬性的所有聲明。層疊規則五設定的永遠大于繼承的。在一個較大的樣式表中,可能會有很多條規則都選擇同一個元素的同一個屬性。比如,一個帶有類屬性的段落,可能會被一條以標簽名作選擇符的規則選中并指定一種字體,而另...

snowell 2019-08-28 18:06 評論0 收藏0
重拾css(4)——樣式來源與層疊規則

摘要：摘自設計指南樣式來源上文中提到，之所以有層疊的概念，是因為有多個樣式來源。優先級相同條件下例如都來自引用樣式，覆蓋的默認規則是后者覆蓋前者，但是有一個特殊情況，其實優先級最高。這一節就開始實踐上一節的思路！ 1.層疊的概念簡言之，層疊就是瀏覽器對多個樣式來源進行疊加，最終確定結果的過程。舉一個簡單的例子： showImg(https://segmentfault.com/img/b...

gityuan 2019-08-29 12:45 評論0 收藏0