CSS繼承性之深入剖析(3)_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
CSS繼續性在應用中存在,那么在樣式表中可能會有些讀者搞不清,多個樣式表同時應用到一個元素對象上會發生什么情形呢?先舉個簡單的例子,請運行下面的代碼:
代碼調試框 [m.ghpqjb.com][ 可先修改部分代碼 再運行查看效果 ]
我們會看到運行的效果:因為選擇符h1和.aaa都匹配上面的h1元素,那么到底瀏覽器會應用哪一個呢?通過在瀏覽器中觀察,我們發現這段文字應用了.aaa這個樣式,所以它顯示的是紅色。這是因為兩條規則的非凡性不一樣,CSS規則必須這樣進行處理。而字體的大小,卻是h1默認的大小。
樣式表中的非凡性描述了不同規則的相對權重,它的基本規則是:
示例代碼 [m.ghpqjb.com]
統計選擇符中的ID屬性個數。
統計選擇符中的CLASS屬性個數。
統計選擇符中的HTML標記名格式。
統計選擇符中的CLASS屬性個數。
統計選擇符中的HTML標記名格式。
最后,按正確的順序寫出三個數字,不要加空格或逗號,得到一個三位數。( 注重,你需要將數字轉換成一個以三個數字結尾的更大的數)。相應于選擇符的最終數字列表可以很輕易確定較高數字特性凌駕于較低數字的。
以下是一個按特性分類的選擇符的列表:
示例代碼 [m.ghpqjb.com]
H1 {color:blue;} 特性值為:1
P EM {color:purple;} 特性值為:2
.apple {red;} 特性值為:10
P.bright {color:yellow;} 特性值為:11
P.bright EM.dark {color:brown;} 特性值為:22
#id316 {color:yellow} 特性值為:100
P EM {color:purple;} 特性值為:2
.apple {red;} 特性值為:10
P.bright {color:yellow;} 特性值為:11
P.bright EM.dark {color:brown;} 特性值為:22
#id316 {color:yellow} 特性值為:100
從上表我們可以看出#id316具有更高的非凡性,因而它有更高的權重。當有多個規則都能應用于同一個元素時,權重越高的樣式將被優先采用。
關于優先權的問題,請參考http://m.ghpqjb.com專門介紹的文章。相信你會有更多的收獲.
相關CSS教程:
- 相關鏈接:
- 教程說明:
CSS教程-CSS繼承性之深入剖析(3)
。