資訊專欄INFORMATION COLUMN
摘要：我們知道字體屬性在任意時刻都只能應(yīng)用一種設(shè)定那此時該應(yīng)用哪種字體呢為解決類似的沖突確定哪條規(guī)則勝出并最終被應(yīng)用提供了三種機(jī)制繼承層疊和特指。層疊規(guī)則層疊規(guī)則一找到應(yīng)用給每個元素和屬性的所有聲明。層疊規(guī)則五設(shè)定的永遠(yuǎn)大于繼承的。
在一個較大的樣式表中,可能會有很多條規(guī)則都選擇同一個元素的同一個屬性。比
如,一個帶有類屬性的段落,可能會被一條以標(biāo)簽名作選擇符的規(guī)則選中并指定一
種字體,而另一條以該段落的類名作選擇符的規(guī)則卻會給它指定另一種字體。我們
知道,字體屬性在任意時刻都只能應(yīng)用一種設(shè)定,那此時該應(yīng)用哪種字體呢?為解
決類似的沖突,確定哪條規(guī)則“勝出”并最終被應(yīng)用,CSS 提供了三種機(jī)制:繼承、
層疊和特指。
CSS 中有很多屬性是可以繼承的,其中相當(dāng)一部分都跟文本有關(guān),比如顏色、字體、
字號。然而,也有很多 CSS 屬性不能繼承,因?yàn)槔^承這些屬性沒有意義。這些不能
繼承的屬性主要涉及元素盒子的定位和顯示方式,比如邊框、外邊距、內(nèi)邊距。
瀏覽器有五個樣式來源，其順序如下：
1. 瀏覽器默認(rèn)樣式表
2. 用戶樣式表
3. 作者鏈接樣式表(按照它們鏈接到頁面的先后順序)
4. 作者嵌入樣式
5. 作者行內(nèi)樣式
瀏覽器會按照上述順序依次檢查每個來源的樣式,并在有定義的情況下,更新對每
個標(biāo)簽屬性值的設(shè)定。整個檢查更新過程結(jié)束后,再將每個標(biāo)簽以最終設(shè)定的樣式
顯示出來。
層疊規(guī)則一:找到應(yīng)用給每個元素和屬性的所有聲明。瀏覽器在加載每個頁面時,都會據(jù)此查到每一條 CSS 規(guī)則,標(biāo)識出所有受到影響的 HTML 元素。
層疊規(guī)則二:按照順序和權(quán)重排序。瀏覽器依次檢查5個來源,并設(shè)定匹配的屬性。如果匹配的屬性在下一個來源也有定義,則更新該屬性的值,如此循環(huán),直到檢查完頁面中所有標(biāo)簽受影響屬性的全部5個來源為止。最終某個屬性被設(shè)定成什么值,就用什么值來顯示。
層疊規(guī)則三:按特指度(優(yōu)先級)排序。除了有點(diǎn)拗口之外,特指度(specificity)其實(shí)表示一條規(guī)則有多明確。如果沒有特指度的考量,那為了讓恰當(dāng)?shù)臉邮狡鹱饔?恐怕我們就免不了要頻繁變換樣式表中規(guī)則的順序了。
I-C-E 方法計算特指度：
1. 選擇符中有一個 ID,就在 I 的位置上加 1;
2. 選擇符中有一個類,就在 C 的位置上加 1;
3. 選擇符中有一個元素(標(biāo)簽)名,就在 E 的位置上加 1;
4. 得到一個三位數(shù)。
舉一個簡單的例子：
p ---> 0-0-1特指度為001=1 div#nav p.fist ---> 1-1-2特指度112=112
層疊規(guī)則四:順序決定權(quán)重。如果兩條規(guī)則都影響某元素的同一個屬性,而且它們的特指度也相同,則位置最靠下(或后聲明)的規(guī)則勝出。
層疊規(guī)則五:設(shè)定的永遠(yuǎn)大于繼承的。從父級繼承下來的規(guī)則，不管特指度有多大，都會被設(shè)定的規(guī)則覆蓋。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111024.html
摘要：知道存在是很有用的，這樣當(dāng)你在別人的代碼中遇到它時，你就知道它是什么了。如上面所示的示例所示，元素選擇器具有很低的特殊性。類選擇器具有更高特殊性，所以將戰(zhàn)勝元素選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。 在實(shí)際的工作中，我們可能還有些疑惑，當(dāng)有多個選擇器作用在一個元素上時，哪個規(guī)則最終會應(yīng)用到元素上？其實(shí)這是通過層疊機(jī)制來控制的，這也和樣式繼承(元素從其父元...
摘要：為了解決沖突，確定哪條規(guī)則勝出并最終被應(yīng)用，提供了三種機(jī)制繼承層疊和特指。整個檢查更新過程結(jié)束后，再將每個標(biāo)簽以最終設(shè)定的樣式顯示出來。層疊規(guī)則四順序決定權(quán)重。規(guī)則三設(shè)定的樣式勝過繼承的樣式，此時不用考慮特指度即顯式設(shè)定優(yōu)先。 為了解決沖突，確定哪條規(guī)則勝出并最終被應(yīng)用，CSS提供了三種機(jī)制：繼承、層疊和特指。 1.繼承 CSS 中的祖先元素會向后代傳遞一樣?xùn)|西：CSS屬性...
摘要：類選擇器具有更高的專用性，所以將戰(zhàn)勝元素選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。選擇器六明顯地輸給了了五，其專用性值為和它在鏈中少了一個元素選擇器。當(dāng)有多個選擇器作用在一個元素上時，哪個規(guī)則最終會應(yīng)用到元素上？ 其實(shí)這是通過層疊機(jī)制來控制的，這也和樣式繼承(元素從其父元素那里獲得屬性值)有關(guān)。 元素的最終樣式可以在多個地方定義，它們以復(fù)雜的形式相互影響。這些復(fù)雜...
摘要：層疊樣式表層疊規(guī)則你或許知道是層疊樣式表的縮寫。但你不一定真正的理解了其中層疊的含義。用戶自定義樣式雖然規(guī)范中有，但從起，開始不支持用戶自定義樣式表，而是建議使用擴(kuò)展來實(shí)現(xiàn)。網(wǎng)站提供的樣式表，則是我們所提供的的樣式。即不為的元素的計算值為。 層疊樣式表 層疊規(guī)則 你或許知道 CSS 是 Cascading Style Sheets（層疊樣式表）的縮寫。但你不一定真正的理解了其中層疊的含...
摘要：問題在寫時，有時候會遇到瀏覽器中顯示的樣式和自己的預(yù)期不符合的情況，這是因?yàn)闆]有理解的層疊機(jī)制。清楚地理解了他這三大法寶，我們就能精準(zhǔn)的預(yù)測出每個元素在瀏覽器中的樣式了。 問題： 在寫CSS時，有時候會遇到瀏覽器中顯示的樣式和自己的預(yù)期不符合的情況，這是因?yàn)闆]有理解CSS的層疊機(jī)制。例如文檔中有一個p元素,用內(nèi)聯(lián)樣式為他設(shè)置了顏色： 2016年10月20日 在CSS中又用不同的方式給...
閱讀 2771·2021-11-24 10:23
閱讀 1166·2021-11-17 09:33
閱讀 2517·2021-09-28 09:41
閱讀 1430·2021-09-22 15:55
閱讀 3653·2019-08-29 16:32
閱讀 1918·2019-08-29 16:25
閱讀 1066·2019-08-29 11:06
閱讀 3433·2019-08-29 10:55
