CSS的「層疊」規則的總結

css的「層疊」規則的總結

當你隨機開啟乙個頁面，檢視源**，你會發現，同乙個元素，不止有乙個css選擇器及對應的樣式。而乙個元素只能應用乙個樣式，那麼一堆樣式中究竟是應用哪乙個呢？這就涉及到css的層疊規則了。下面就來總結下css的層疊規則。

1、瀏覽器預設的樣式；

2、使用者自定義樣式。一些頁面中會提供一些讓使用者自定義字型大小顏色等的快捷鍵；

3、外部樣式，即引用的css字尾檔案；

4、內部樣式，即寫在標籤內的樣式；

5、內聯樣式，即直接寫在style屬性內的樣式（現在的網頁設計強調結構、表現、行為三者分離，所以這個還是少用為好。我會強迫性移除內聯樣式的，哈哈）；

1、創作人員（上面提到的第3、4、5點都可歸到這一點）

2、讀者（使用者自定義樣式）

3、使用者**（這個就是上面所說的瀏覽器預設樣式了）

來看乙個例子：

1 

2 323 24 25 26 hello world
27 hello, how are you!
28 i'm important!
29 
30 
31 32 
33 34 style.css檔案的**：
35 .div1 .div2 #p1

css2.1層疊規則是：

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

2、按顯式權重對應用到該元素的所有宣告進行排序，有!important標誌的宣告的權重要高於不帶!important標誌的宣告。

3、按**對應用到給定元素的所有宣告進行排序。正常情況下，創作人員的樣式要勝過讀者的樣式。有!important標誌的的讀者樣式要強於所有其他樣式，包括有!important標誌的創作人員樣式。創作人員的樣式和讀者樣式鬥都比使用者**的預設樣式強。

4、按特殊性對應用到給定元素的所有宣告進行排序，有較高特殊性的元素權重要大於有較低特殊性的元素。

5、按出現順序對應用到給定元素的所有宣告進行排序，後面出現的宣告權重要大於前面出現的宣告，即後定義的樣式會覆蓋前面定義的樣式。

根據以上的知識，我們很明確知道了上面的例子三行文字的顏色是什麼了：

第一行是文字的顏色是green；第二行文字的顏色是red；第三行文字顏色是brown。

下面著重講解下選擇器的特殊性：

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特殊性也沒有（css中的繼承是有選擇性的，並不是全部css都繼承，像邊框屬性就不會繼承）。

注：偽元素選擇器包含以下幾種：

1、:first-line；  用於向文字的首行設定特殊樣式；

2、:first-letter；  用於向文字的首字母設定特殊樣式；

3、:before；   可以在元素的內容前面插入新內容；

4、:after；   可以在元素的內容之後插入新內容；

5、::selection 選擇被使用者選取的元素部分（css3中新加的選擇器）；

下面再來看乙個例子：

1 

2 329 30 31 3233 3435 
36 
37 38 
39 40 

用剛剛講的特殊性規則計算下這六個樣式的特殊性：

第乙個規則特殊性的值是：0，2，0，1

第二個規則特殊性的值是：0，2，0，1

第三個規則特殊性的值是：0，1，1，3

第四個規則特殊性的值是：0，1，1，2

第五個規則特殊性的值是：0，1，1，1

第六個規則特殊性的值是：0，1，2，3

這樣很明確知道了，特殊性最高的是第一和第二條規則，但第二條規則在後面，所以第乙個標題的顏色是blue，第二個標題的顏色是red.

在這裡要重點提一下，0特殊性（萬用字元）和沒有特殊性（結合符和繼承）是有很大差別的，這種差別決不能忽視。

看下面的例子，就可以看出兩者的區別了：

1 

2 313 14 15 
16 17 
18 

說了特殊性，這裡也順便引入一遍文章，這是對特殊性的另一方面的說明。

css層疊規則

網頁上的元素其實是三維的，類似於高中學的左手座標系，z軸就是垂直於螢幕。層疊上下文跟 塊狀格式化上下文 bfc 類似，只要元素擁有某些特定的css屬性，就會表現出層疊上下文的特點。前提是重疊在一起，就會按照上圖的規則呈現。1 誰大誰上 如生效的z index屬性值，大的就覆蓋小的。2 後來居上 當元...

CSS 的層疊規則說明

整個過程 查詢competing rule集。對competing rules進行排序 對元素，應用sorted rules中的屬性 層疊過程，高優先順序的在上面，覆蓋了下面低優先順序的屬性 最後渲染，考慮繼承值 也是個層疊過程 和預設值,再做屬性值轉換。原則就是 general spwww.cpp...

css 樣式層疊規則

檢視別人css,發現有一段css button.dark.blue button.dark 如果這樣寫,backgroud color到底是用誰的呢?原來我只知道內聯樣式的權值 id選擇器 類選擇器 標籤選擇器這樣的規則,還有就是越精細等級越高,看上面css 應該是第乙個優先順序更高吧 測試了一下,...