CSS規則的繼承與層疊

snowell 發布于2019-08-28 18:06 / 569人閱讀

摘要：我們知道字體屬性在任意時刻都只能應用一種設定那此時該應用哪種字體呢為解決類似的沖突確定哪條規則勝出并最終被應用提供了三種機制繼承層疊和特指。層疊規則層疊規則一找到應用給每個元素和屬性的所有聲明。層疊規則五設定的永遠大于繼承的。

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

繼承

CSS 中有很多屬性是可以繼承的,其中相當一部分都跟文本有關,比如顏色、字體、
字號。然而,也有很多 CSS 屬性不能繼承,因為繼承這些屬性沒有意義。這些不能
繼承的屬性主要涉及元素盒子的定位和顯示方式,比如邊框、外邊距、內邊距。

層疊

瀏覽器有五個樣式來源，其順序如下：
1. 瀏覽器默認樣式表
2. 用戶樣式表
3. 作者鏈接樣式表(按照它們鏈接到頁面的先后順序)
4. 作者嵌入樣式
5. 作者行內樣式

瀏覽器會按照上述順序依次檢查每個來源的樣式,并在有定義的情況下,更新對每
個標簽屬性值的設定。整個檢查更新過程結束后,再將每個標簽以最終設定的樣式
顯示出來。

層疊規則

層疊規則一:找到應用給每個元素和屬性的所有聲明。瀏覽器在加載每個頁面時,都會據此查到每一條 CSS 規則,標識出所有受到影響的 HTML 元素。

層疊規則二:按照順序和權重排序。瀏覽器依次檢查5個來源,并設定匹配的屬性。如果匹配的屬性在下一個來源也有定義,則更新該屬性的值,如此循環,直到檢查完頁面中所有標簽受影響屬性的全部5個來源為止。最終某個屬性被設定成什么值,就用什么值來顯示。

層疊規則三:按特指度(優先級)排序。除了有點拗口之外,特指度(specificity)其實表示一條規則有多明確。如果沒有特指度的考量,那為了讓恰當的樣式起作用,恐怕我們就免不了要頻繁變換樣式表中規則的順序了。

I-C-E 方法計算特指度：
1. 選擇符中有一個 ID,就在 I 的位置上加 1;
2. 選擇符中有一個類,就在 C 的位置上加 1;
3. 選擇符中有一個元素(標簽)名,就在 E 的位置上加 1;
4. 得到一個三位數。

舉一個簡單的例子：

p       --->    0-0-1特指度為001=1
div#nav p.fist      --->    1-1-2特指度112=112

層疊規則四:順序決定權重。如果兩條規則都影響某元素的同一個屬性,而且它們的特指度也相同,則位置最靠下(或后聲明)的規則勝出。

層疊規則五:設定的永遠大于繼承的。從父級繼承下來的規則，不管特指度有多大，都會被設定的規則覆蓋。

云服務器 GPU云服務器 css與html的區別 html與css的區別繼承與多態 python類與繼承

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

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

不知道層疊，別說你懂CSS

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

izhuhaodev 2019-08-30 14:03 評論0 收藏0
CSS學習筆記(四) CSS優先級

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

高勝山 2019-08-28 18:01 評論0 收藏0
CSS學習摘要-層疊和繼承

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

mating 2019-04-23 13:40 評論0 收藏0
你不知道的層疊樣式表

摘要：層疊樣式表層疊規則你或許知道是層疊樣式表的縮寫。但你不一定真正的理解了其中層疊的含義。用戶自定義樣式雖然規范中有，但從起，開始不支持用戶自定義樣式表，而是建議使用擴展來實現。網站提供的樣式表，則是我們所提供的的樣式。即不為的元素的計算值為。層疊樣式表層疊規則你或許知道 CSS 是 Cascading Style Sheets（層疊樣式表）的縮寫。但你不一定真正的理解了其中層疊的含...

Bryan 2019-08-29 16:59 評論0 收藏0
理解層疊樣式表中的層疊機制，精準掌握元素樣式

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

0x584a 2019-08-29 11:27 評論0 收藏0