css層疊規則（層疊樣式表）

標籤：開發人員   樣本   相關   注意   顏色   選擇性   table   nbsp   使用者   

CSS層疊規則是：

1、找出所有相關的規則，這些規則都包含與一個給定元素匹配的選取器。

2、按權重（!important）和來源對應用到給定元素的所有聲明進行排序。

3、按特殊性對應用到給定元素的所有聲明進行排序，有較高特殊性的元素權重要大於有較低特殊性的元素，0特殊性比無特殊性要強（繼承）。

4、按出現順序對應用到給定元素的所有聲明進行排序，後面出現的聲明權重要大於前面出現的聲明，即後定義的樣式會覆蓋前面定義的樣式。（適用於特殊性一樣的時候）

解讀：

一、權重和來源

來源：

1、創作人員（開發人員）

　　1）、外部樣式，即<link>引用的CSS尾碼檔案；

　　2）、內部樣式，即寫在<style></style>標籤內的樣式；

　　3）、內聯樣式，即直接寫在style屬性內的樣式（網頁設計強調結構、表現、行為三者分離，不建議使用。）；

2、讀者（使用者自訂樣式：一些頁面中會提供一些讓使用者自訂字型大小顏色等的快速鍵；）

3、使用者代理程式（最主要的是：瀏覽器預設樣式）

權重（由大到小的順序排序）：

 1）讀者的重要聲明（!important）

 2）創作人員的重要聲明（!important）（高於內聯樣式！）

 3）創作人呀的正常聲明

 4）讀者的正常聲明

 5）使用者代理程式的聲明

二、樣式繼承

文檔應用聲明還有一個很重要的概念，即繼承：它依賴於祖先-後代的關係的，繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。

CSS中的繼承也是有選擇性的，並不是全部CSS都繼承，大多數框模型屬性都不能繼承，例如，內、外邊距、背景和邊框等。

例如：一個body定義了的顏色值也會應用到段落的文本中。

三、選取器的特殊性

1、對於內聯樣式，特殊性首位加1，即1，0，0，0。

2、對於選取器中出現的ID屬性值，加0，1，0，0， 有多少個ID值就在第二位加幾位。

3、對於選取器中出現的類屬性值，屬性選擇及偽類，加0，0，1，0，共出現多少個就在第三位加幾位。

4、對於選取器中出現的元素，以及虛擬元素，加0，0，0，1，共出現多少個就在第四位加幾位。

5、萬用字元對特殊性沒有任何貢獻，即特殊性是0，0，0，0。

6、結合符沒有特殊性，連0特殊性也沒有。

7、繼承的CSS完全沒有特殊性，連0特殊性也沒有。

注意:因為萬用字元*的特殊性是0， 而繼承的CSS是沒有特殊性的，連0也沒有，所以，萬用字元的權重要大於繼承。

特殊性計算樣本：

h1{color:red;}  /*specificity = 0,0,0,1*/p em{color:purple;}  /*specificity = 0,0,0,2*/.grape{color:yellow;}  /*specificity = 0,0,1,0*/*.grape{color:yellow;}  /*specificity = 0,0,1,0*/p.grape em.dark{color:maroon;}  /*specificity = 0,0,2,2*/#grape{color:blue;} /*specificity = 0,1,0,0*/div#grape *[href] {color:silver;} /*specificity = 0,1,1,1*/html > body > table tr[id="totals"] td ul > li{color:maroon;} /*specificity = 0,0,1,7*/h1 + p{color:black;} /*specificity = 0,0,0,2*/

 

css層疊規則（層疊樣式表）