詳解CSS層疊機制

CSS（Cascading Style Sheet）

層疊樣式表中的層疊意味著樣式會從文件結構中的一個層次傳遞到另一個層次，其作用是讓瀏覽器來決定在諸多來源中，為某個標籤套用來自哪個來源的樣式屬性。

層疊是一種強大的機制。理解層疊有助於以最經濟和最容易維護的方式來編寫CSS，也有助於根據你的意願創建出最理想的文件外觀。

樣式的來源

首先，應該會有一個隱藏在瀏覽器中的瀏覽器樣式表（預設樣式表），因為每個標籤不需要寫什麼就會帶有樣式。例如，h1標籤中的文字會顯示為較大的粗體，em標籤中的文字會顯示為斜體等等，一切都是自動添加的。

其次，是使用者樣式表。非常少見，但是能提供很大方便。例如，對於視力殘障使用者來說，可以自行增大文字的基準大小（例如：body { font-size:200%}），或強製文字相互之間以容易辨認的顏色進行顯示。 Windows中輔助功能可以新增樣式表。

最後，還有一個設計者樣式表。就是web開發人員寫的。

瀏覽器對待樣式來源的順序：

預設的瀏覽器樣式表

#使用者樣式表

設計者樣式表

#設計者嵌入的樣式

設計者內聯的樣式

當瀏覽器按照以上順序查找對應位置的樣式時，如果遇到了為某個標籤定義的屬性值，就會更新對應標籤的設定。瀏覽器在預設樣式表中定義標籤的樣式，如果哦其他位置也為標籤定義了樣式，瀏覽器就會將設定更新為該文職定義的值。

這些就是層疊的基本運作原理。

層疊規則

#規則1：找到套用於每個元素好屬性的完整宣告。

規則2：依序和重要性排序。瀏覽器會依序檢查5種樣式來源，並設定所有符合的屬性。如果後面的來源再次設定了某個符合的屬性，那麼瀏覽器會在必要時更新該屬性的值並重複這個過程。

規則3：依針對性排序。在很難做出判斷的情況下（例如兩個規則符合同一標籤且是同一種樣式來源），針對性可以決定規則的勝負。

範例1：樣式表中包含這兩個規則，

P {font-size:12px;}

p.largetext { font-size:16px; }

那麼，

A bit of text

中的文字將會顯示為16像素高。因為後者更具針對性。

P {font-size:12px;}

.largetext { font-size:16px; }

這兩條規則都符合同一個標籤，但是因為類選擇符優先，所以文字會顯示16像素。具體原因是：標籤選擇符的數字針對性為1，而類別選擇符的針對性為1-0.這裡存在一個如何計算選擇符針對性的問題。針對每個樣式都會有一個簡單的計分系統，分數的表示形式如下3個值：

                   A – B – C

其中短線是分隔符，而不是分隔符號，而非減號。計分法如下：

1.       選擇子中存在一個ID，即為A加上1。

2.       選擇子中存在一個類別，且就要為B加上1。

3.       選擇符中存在一個元素名稱（標籤名稱），而存在於C加上1.

4.       將最後的結果依照三位證明來計算。 （結果並不是真正的三位數，只不過在多數情況下，將其理解為一個三位數更容易判斷。例如，0-1-12與0-2-1相比，後者更具有針對性）

請看下面一組範例：

P       0 – 0 – 1針對性=1

p.largetext       0 – 1 – 1針對性=11111111111111111111111111111111111111111L111L111L116L11110L1111111110 號等級=11111111111111111111116 號）的範例。

#p#largetext      1 – 0 – 1 針對性=101

body p#largetext     1 – 0 – 2 針對性=102

body p#largetext ul.mylist       1 – 1 – 3 針對性=113

text#)> mylist li    1 – 1 – 4 針對性=114

規則4：依序排序。如果兩個規則具有完全相同的權重，那麼在層疊順序中位於最下層的規則優先。

針對性比順序更重要，因此具有更高針對性的規則要優先於在層疊中更靠近底層但針對性更低的規則。

以上是詳解CSS層疊機制的詳細內容。更多資訊請關注PHP中文網其他相關文章！