web前端技能方法總結（css、js、jquery、html）（21）

層疊（cascade）

Cascading Styling Sheet（層疊式樣式表）

首先，是你（作者）為網頁寫的所有樣式表。

第二，有些浏覽器也允許使用者給XHTML元素建立他們自己的樣式。如果你的樣式表沒有定義這些樣式，就由使用者的樣式表來代替。（注意讀者在屬性聲明後加上“!important”就能覆寫你的樣式）

第三，如果沒給一個元素定義樣式，浏覽器自己有一系列預設樣式可以用。如果沒有作者或讀者提供的樣式表，就用這些樣式。

當浏覽器需要決定給一個元素應用哪種樣式時，它就采用這些樣式表。優先權最高的是作者的樣式，然後是讀者的樣式，最後是浏覽器的預設樣式。層疊就是浏覽器決定采用哪種樣式的方法。
           

1、層疊中浏覽器的工作過程

假設網頁中有一個

元素，你要扮成“浏覽器”，要确定它的font-size屬性，有以下幾步：

第一步：把所有的樣式表集中起來（包括網頁作者寫的樣式表，讀者加進去的樣式表，浏覽器預設的樣式表）。

第二步：找到所有比對的聲明。這個例子中要找的是font-size屬性，是以看看所有的有選擇

元素的選擇符的font-size聲明。檢查所有樣式表，找出所有比對

并且有font-size屬性的規則。

第三步：将所有比對結果分類。所有比對的規則都找出來後，把它們以作者、讀者、浏覽器的順序排序。作者寫的比讀者寫的重要，同樣，讀者的樣式比浏覽器的預設樣式重要。（前邊提過，讀者可以在CSS屬性中加“!important”，這樣排序的時候要把它們放到最前面）

第四步：根據聲明的具體程度排序。一條規則越能準确地選擇一個元素，它就越具體。（一般憑直覺即可知，對于複雜情況下邊有方法介紹如何處理）注意，隻在作者、讀者、浏覽器各個範圍内排序，不是重新排整個清單。

第五步：最後，将所有沖突規則按照它們在各種樣式表中出現的順序排序。清單中的沖突規則排序的依據是，在它們各自樣式表中後出現的規則更重要一些。

通過以上步驟，順序表中的第一條規則就是獲勝者，就用它的font-size屬性。

2、如何決定一個選擇符的具體度

要計算具體度，先以一組三個數字開始，000.然後計算選擇符中的各種東西——左起第一位：如果這個選擇符有id，每個加1分；中間位：這個選擇符有類或僞類，每個加一分；最後一位：如果這個選擇符有元素名稱，每個加一分。eg：h1.greentea 011;a:link 011;#elixirs h1 101;p img 002.

（1）一個具體度比另一個大事怎麼看出來的？把它們當作真正的數字來讀就行：100（一百）比010（十）大，010（十）比001（一）大，一次類推。

（2）像"h1,h2"這樣的規則，應怎麼計算具體度？把它想成是兩條單獨的規則：一條h1規則，具體度是001；一條h2規則，具體度也是001.

（3）一條規則在CSS檔案中越靠後，優先權越高。但是XHTML中的多個樣式表連結的優先權呢？不管在不在同一個CSS檔案中，順序總是從頭到尾。就當是把CSS以被連結的順序都一起插入到檔案中。

（4）注意，上述5個步驟中，每次排序都是以之前的順序為基礎的。首先，以作者、讀者、浏覽器的順序排序，接着，在這些分類中按具體度排序，最後，将具體度相同的所有元素，根據在樣式表中出現的順序重新排序。

（5）關于!important 讀者可以在屬性聲明末尾加!important忽略一種樣式。比如：h1{fat-size:200%!important;}這就會忽略掉所有同屬性的作者樣式。

3、如果你在層疊中的規則中沒有找到比對的屬性，就要用繼承。但不是所有的屬性都能通過繼承得到，比如邊框屬性。對于能繼承的屬性（比如color、font-family、line-height等），浏覽器從父親開始檢查元素的祖先，給屬性找個指，如果能找到，就是我們要的屬性值。如果那個屬性不能通過繼承得到，或者在祖先規則中也找不到值，那麼唯一的辦法就是求助于浏覽器樣式表中的預設值，所有的浏覽器對每個元素都有預設樣式。