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

0x584a 發布于2019-08-29 11:27 / 345人閱讀

摘要：問題在寫時，有時候會遇到瀏覽器中顯示的樣式和自己的預期不符合的情況，這是因為沒有理解的層疊機制。清楚地理解了他這三大法寶，我們就能精準的預測出每個元素在瀏覽器中的樣式了。

問題：

在寫CSS時，有時候會遇到瀏覽器中顯示的樣式和自己的預期不符合的情況，這是因為沒有理解CSS的層疊機制。
例如文檔中有一個p元素,用內聯樣式為他設置了顏色：

2016年10月20日

在CSS中又用不同的方式給他指定了顏色：

p {
    color: #000;
  }
.date {
    color: #FFF;
  }

這三個規則都要控制p元素的顏色，而p元素肯定只能有一種顏色，那么他會選擇哪一種呢？

層疊：

層疊就是用來處理這種沖突的一種機制。
他有三大法寶來幫助他完成這個任務：重要度、特殊性、先后順序。

一.重要度

首先決定使用規則的是重要度，層疊采用的重要度次序（序號越小越重要）：

1.標有！important的用戶樣式
2.標有！important的作者樣式
3.作者樣式
4.用戶樣式
5.瀏覽器/用戶代理應用的樣式

重要度更高的規則會覆蓋重要度較低的規則。

二、特殊性

那如果重要度相同呢？像上面的例子那樣，都是普通的作者樣式，他會怎么處理呢？
這時候就要用到另外一個概念，特殊性。更特殊的規則會成為優勝方。
與樣式來源不同，CSS選擇器多種多樣，并且可以疊加使用，添加樣式的方法也很多（內聯，外部引用，繼承）。所以，為了更好的衡量一個規則的特殊性，層疊機制為每個選擇器和方法都分配了一個數值：

行內樣式：1000
ID選擇器：100
類、偽類、屬性選擇器：10
類型選擇器、偽元素選擇器：1
繼承：0

每個規則的特殊性就是他包含的選擇器和方式對應的值之和。所以在上面的例子中，p元素的顏色會是 #999.

不管規則多么復雜，這個法寶都能勝任。
例如：


    
        2016年10月20日
        13:20:00

如果CSS中是這樣寫的，表示時間的p元素的顏色會是#000，因為‘#calendar p’的特殊性為100+1=101，而‘#time’的特殊性為100，雖然‘#time’離目標元素更近，但這并不是評判標準。

#calendar p{
    color: #000;
}
#time {
    color: #FFF;
}

第二個規則如果換成

.date #time {
    color: #FFF;
}

"13:20:00"的顏色會是#FFF，因為‘.date #time’的特殊性為10+100=110.

三、先后順序

那么如果換成這樣呢？

#calendar p{
    color: #000;
}
p#time {
    color: #FFF;
}

這兩個規則的特殊性相同了。這個時候就要用到第三個法寶，先后順序。
因為瀏覽器解析CSS文檔時是自上而下的，所以當前兩個法寶都無法分清勝負時，靠后面的規則會取勝，所以它的顏色會是#FFF

總結：

有了這三個法寶，層疊機制就可以處理一切沖突了。清楚地理解了他這三大法寶，我們就能精準的預測出每個元素在瀏覽器中的樣式了。

附上一個用于測試的小鏈接：
https://jsfiddle.net/mamengyi...

參考：《精通CSS》

GPU云服務器云服務器 html外部層疊樣式樣式表中樣式獲取元素樣式元素的樣式

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

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

CSS學習筆記(四) CSS優先級

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

高勝山 2019-08-28 18:01 評論0 收藏0
不知道層疊，別說你懂CSS

摘要：知道存在是很有用的，這樣當你在別人的代碼中遇到它時，你就知道它是什么了。如上面所示的示例所示，元素選擇器具有很低的特殊性。類選擇器具有更高特殊性，所以將戰勝元素選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。在實際的工作中，我們可能還有些疑惑，當有多個選擇器作用在一個元素上時，哪個規則最終會應用到元素上？其實這是通過層疊機制來控制的，這也和樣式繼承(元素從其父元...

izhuhaodev 2019-08-30 14:03 評論0 收藏0
CSS學習摘要-層疊和繼承

摘要：類選擇器具有更高的專用性，所以將戰勝元素選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。選擇器六明顯地輸給了了五，其專用性值為和它在鏈中少了一個元素選擇器。當有多個選擇器作用在一個元素上時，哪個規則最終會應用到元素上？其實這是通過層疊機制來控制的，這也和樣式繼承(元素從其父元素那里獲得屬性值)有關。元素的最終樣式可以在多個地方定義，它們以復雜的形式相互影響。這些復雜...

mating 2019-04-23 13:40 評論0 收藏0
CSS規則的繼承與層疊

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

snowell 2019-08-28 18:06 評論0 收藏0
CSS 入門指南：（1）工作原理

摘要：例如如果想讓和的文本都變成藍色粗體可以這么寫也可以這么寫分組選擇符以逗號作為分隔符第三種方法多條規則應用給一個選擇符。上下文選擇符以空格作為分隔符特殊的上下文選擇符子選擇符格式如下標簽標簽標簽必須是標簽的父元素，不能是其它的祖先元素。 css 工作原理每個html元素都有一組樣式屬性，可以通過css來設定。當html元素的同一個樣式屬性有多種樣式值的時候，css就要靠層疊機智來決定最...

RobinQu 2019-08-29 12:38 評論0 收藏0