資訊專欄INFORMATION COLUMN
摘要：為了解決沖突，確定哪條規(guī)則勝出并最終被應(yīng)用，提供了三種機(jī)制繼承層疊和特指。整個(gè)檢查更新過程結(jié)束后，再將每個(gè)標(biāo)簽以最終設(shè)定的樣式顯示出來。層疊規(guī)則四順序決定權(quán)重。規(guī)則三設(shè)定的樣式勝過繼承的樣式，此時(shí)不用考慮特指度即顯式設(shè)定優(yōu)先。
1.繼承為了解決沖突，確定哪條規(guī)則勝出并最終被應(yīng)用，CSS提供了三種機(jī)制：繼承、層疊和特指。
CSS 中的祖先元素會向后代傳遞一樣?xùn)|西：CSS屬性的值。可以繼承的屬性相當(dāng)一部分都個(gè)文本有關(guān)，比如顏色、字體、字號。然而，也有很多 CSS 屬性不能繼承，因?yàn)槔^承這些屬性沒有意義。這些不能繼承的屬性主要涉及元素盒子的定位和顯示方式，比如邊框、外邊距、內(nèi)邊距。
2.層疊注意：由于字體和文本樣式是可以繼承的，所以在使用相對字體單位（如百分比和 em）時(shí)要格外小心。如果某個(gè)標(biāo)簽的字體大小被設(shè)置為 80%，而它的一個(gè)后代的字體大小也被設(shè)置為 80%，那么該后代中文本最終的字體大小將是 64%（ 80%的 80%）。這有時(shí)候可能并不是你想要的結(jié)果。
層疊，就是層疊樣式表中的層疊，是一種樣式在文檔層次中逐層疊加的過程，目的是讓瀏覽器面對某個(gè)標(biāo)簽特定屬性值的多個(gè)來源，確定最終使用哪個(gè)值。
2.1 樣式來源提示：層疊是 CSS 的核心機(jī)制，理解了它才能以最經(jīng)濟(jì)的方式寫出最容易改動(dòng)的 CSS，讓文檔外觀在達(dá)到設(shè)計(jì)要求的同時(shí)，也給用戶留下一些空間，讓他們能根據(jù)需要更改文檔的顯示效果（比如整體調(diào)整字號）。
以下是瀏覽器層疊各個(gè)來源樣式的順序：
瀏覽器默認(rèn)樣式
用戶樣式表
作者鏈接樣式表（按照它們鏈接到頁面的先后順序）
作者嵌入樣式
作者行內(nèi)樣式
其中，用戶 是指有特別需求的用戶，例如視障人士，他們可以通過用戶樣式表，強(qiáng)制瀏覽器加載的所有網(wǎng)站都以更大的字號，更容易分辨的顏色顯示內(nèi)容。而 作者，就是網(wǎng)頁設(shè)計(jì)師（你）。
瀏覽器會按照上述順序依次檢查每個(gè)來源的樣式，并在有定義的情況下，更新對每個(gè)標(biāo)簽屬性值的設(shè)定。整個(gè)檢查更新過程結(jié)束后，再將每個(gè)標(biāo)簽以最終設(shè)定的樣式顯示出來。
2.2 層疊規(guī)則層疊規(guī)則一：找到應(yīng)用給每個(gè)元素和屬性的所有聲明。
層疊規(guī)則二：按照順序和 權(quán)重 排序。
層疊規(guī)則三：按 特指度（specific）排序。
層疊規(guī)則四：順序決定權(quán)重。
3.特指提示：聲明也可以有權(quán)重，空格!important 分號( ;)用于加重聲明的權(quán)重。
例如：p {color:green !important; font-size:12pt;}
計(jì)算選擇符的特指度
一個(gè)簡單的記分規(guī)則，即對每個(gè)選擇符都要按下面的 ICE 公式計(jì)算三個(gè)值：
I-C-E（ID-Class-Element）
說明：1.三個(gè)字母間的短橫線是分隔符，并非減號；2.這并非真正的三位數(shù)，只不過大多數(shù)情況下把結(jié)果看成一個(gè)三位數(shù)沒問題，三位數(shù)最大的勝出。
但是，千萬得知道 0-1-12 與 0-2-0 相比，仍然是 0-2-0 的特指度更高。
針對這個(gè)公式的計(jì)分辦法如下：
1.選擇符中有一個(gè)ID，就在I的位置加1；
2.選擇符中有一個(gè)類，就在C的位置加1；
3.選擇符中有一個(gè)元素（標(biāo)簽）名，就在E的位置上加1；
4.得到一個(gè)三位數(shù)。
可以通過下面的例子來理解：
P{} //0-0-1 特指度=1
p.largetext{} //0-1-1 特指度=11
p#largetext{} //1-0-1 特指度=101
body p#largetext{} //1-0-2 特指度=102
body p#largetext ul.mylist{} //1-1-3 特指度=113
body p#largetext ul.mylist li{} //1-1-4 特指度=114
在此，每個(gè)選擇符都比前一個(gè)選擇符的特指度更高。
4.查理版簡單層疊要點(diǎn)在這個(gè)查理版里，只要記住三條規(guī)則就夠了。這三條規(guī)則適合所有情況：
規(guī)則一： 包含 ID 的選擇符勝過包含類的選擇符，包含類的選擇符勝過包含標(biāo)簽名的選
擇符。
規(guī)則二： 如果幾個(gè)不同來源都為同一個(gè)標(biāo)簽的同一個(gè)屬性定義了樣式，行內(nèi)樣式勝過嵌入樣式，嵌入樣式勝過鏈接樣式。在鏈接的樣式表中，具有相同特指度的樣式，后聲明的勝過先聲明的。
規(guī)則一勝過規(guī)則二。換句話說，如果選擇符更明確（特指度更高），無論它在哪里，都會
勝出。
規(guī)則三： 設(shè)定的樣式勝過繼承的樣式，此時(shí)不用考慮特指度（即顯式設(shè)定優(yōu)先）。
下面簡單解釋一下規(guī)則三。
比如下面的標(biāo)記：
Inheritance is weak in the Cascade
和下面的規(guī)則：
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2 （高特指度）
會導(dǎo)致單詞 weak 變成藍(lán)色，因?yàn)樗鼜母冈?p 那里繼承了這個(gè)顏色值。
但是，只要我們再給 em 添加一條規(guī)則 em {color:red;}
0 - 0 - 1 （低特指度）
em 就會變成紅色。因?yàn)?，雖然它的特指度低（0-0-1），但 em 繼承的顏色值，會被為它明確（顯式）指定的顏色值覆蓋，就算（隱式）遺傳該顏色值的規(guī)則的特指度高（2-0-2）也沒有用。
參考資料
CSS設(shè)計(jì)指南
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110963.html
摘要：優(yōu)先級第一優(yōu)先級無連接符號第二優(yōu)先級空格第三優(yōu)先級復(fù)雜選擇器的連接符號空格表示選中所有符合條件的后代節(jié)點(diǎn)。后代表示選中符合條件的子節(jié)點(diǎn)。直接后繼表示選中對應(yīng)列中符合條件的單元格。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...
摘要：優(yōu)先級第一優(yōu)先級無連接符號第二優(yōu)先級空格第三優(yōu)先級復(fù)雜選擇器的連接符號空格表示選中所有符合條件的后代節(jié)點(diǎn)。后代表示選中符合條件的子節(jié)點(diǎn)。直接后繼表示選中對應(yīng)列中符合條件的單元格。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...
摘要：優(yōu)先級第一優(yōu)先級無連接符號第二優(yōu)先級空格第三優(yōu)先級復(fù)雜選擇器的連接符號空格表示選中所有符合條件的后代節(jié)點(diǎn)。后代表示選中符合條件的子節(jié)點(diǎn)。直接后繼表示選中對應(yīng)列中符合條件的單元格。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...
摘要：國內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來自單個(gè)樣式規(guī)...
閱讀 2978·2021-11-25 09:43
閱讀 3600·2021-11-24 11:13
閱讀 3373·2021-10-14 09:42
閱讀 2578·2021-09-23 11:53
閱讀 3622·2021-09-22 15:57
閱讀 3233·2021-09-02 09:54
閱讀 3510·2019-08-30 13:47
閱讀 1649·2019-08-29 16:55
