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