CSS中的特殊性、繼承、層疊，css特殊性

CSS中的特殊性、繼承、層疊，css特殊性
前言

　　最近在看《CSS權威指南》，書中第三章“結構和層疊”對特殊性的解釋十分到位，今天就來整理下思路，記錄如下。

 

引入問題

　　

　　非常簡單的一個列表結構，那麼想對“第一個”字樣設定字型顏色，可能有兩種方法：

　　

　　那麼問題來了，究竟字型會變成什麼顏色？

 

CSS規則結構

　　

　　每條CSS規則的結構如上，請記住各自名稱，否則繼續前行會有不適感。

 

特殊性

　　關於特殊性的概念和作用書中說的很詳細：

　　　　對於每個規則，使用者代理程式（瀏覽器）會計算選取器的特殊性，並將這個特殊性附加到規則中的各個聲明。

　　　　如果一個元素有兩個或多個衝突的屬性生命，那麼有最高特殊性的聲明就會勝出。

　　整體來說分為兩部分：計算和比較。第一眼看到肯定不太理解，那麼先用起來，沒事兒的時候回來看看，豁然開朗。

 

特殊性的計算規則

　　按照特殊性的介紹中所述，如何計算特殊性是非常重要的，下面是書中所給的計算規則：

　　　　1. 內聯樣式： 1,0,0,0

　　　　2. ID選取器： 0,1,0,0

　　　　3. class選取器、屬性選取器、偽類別選取器： 0,0,1,0

　　　　4. 元素選取器、虛擬元素選取器： 0,0,0,1

　　　　5. 萬用字元選取器： 0,0,0,0

　　　　6. 結合符、繼承： 沒有特殊性

　　　　7. !important：按照有無該關鍵字分為兩組，各自計算

　　　　註：四組數字之間沒有任何關係，不存在進位一說。　　

　　上面的規則涵蓋了所有可能出現的CSS選取器，可以根據這些計算出相關選取器的特殊性，瀏覽器會將特殊性賦值給聲明塊中的每一個聲明。

　　

　　相關例子數不勝數，就不數了，會計算即可。

 

特殊性的比較規則：層疊

　　反觀特殊性的介紹，可知特殊性的計算是為了比較，進而決定勝出的樣式進行顯示，比較的規則稱為層疊，當然前提是聲明出現衝突的情況下。規則如下：

　　　　1. 首先按照權重比較：

　　　　　　讀者重要樣式>創作者重要樣式>創作者正常樣式>讀者正常樣式>瀏覽器預設樣式

　　　　2. 前述條件不能比較時，按照特殊性比較：

　　　　　　特殊性從左至右依次比較每組數字，如：1,0,0,1和0,2,0,0，會按照前者定義樣式顯示。

　　　　3. 前述條件不能比較時，按照出現順序比較：

　　　　　　後出現的會覆蓋先出現的。

　　根據上面的規則，可以得出問題的答案：顏色會如下：

　　　　

 

小結

　　第一次整理部落格，收穫蠻大的，平時看書大都一概而過，這次真的學透了。