CSS層疊與繼承用法手冊
本文向大家描述一下CSS層疊與繼承的用法，個元素可能同時被多個CSS選擇器選中，每個選擇器都有一些CSS規則，這就是層疊，而繼承得來的規則沒有特殊性。
CSS層疊與繼承
一、CSS層疊
我們知道文檔中的一個元素可能同時被多個CSS選擇器選中，每個選擇器都有一些CSS規則，這就是層疊。這些規則有可能不矛盾的，自然這些規則將會同時起效，然而有些規則是相互沖突的，例如：
ExampleSourceCode
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>CSSCascadetitle>
- <styletypestyletype="text/CSS">
- h1{color:Red;}
- bodyh1{color:Blue;}
- style>
- head>
- <body>
- <h1>Hellodiv-CSS.neth1>
- body>
- html>
為此需要為每條規則制定特殊性，當發生沖突的時候必須選出一條最高特殊性的規則來應用。CSS規則的特殊性可以用4個整數來表示，例如0，0，0，0.計算規則如下：
對于規則中的每個ID選擇符，特殊性加0，1，0，0
對于規則中每個類選擇符和屬性選擇符以及偽類，特殊性加0，0，1，0
對于規則中的每個元素名或者偽元素，特殊性加0，0，0，1
對于通配符，特殊性加0，0，0，0.
對于內聯規則，特殊性加1，0，0，0
最終得到結果就是這個規則的特殊性。兩個特殊性的比較類似字符串大小的比較，是從左往右依次比較，第一個數字大的規則的特殊性高。上例中兩條規則的特殊性分別是0，0，0，1和0,0,0,2，顯然第二條勝出，因此最終字是藍色的。
注意，通配符的特殊性0,0,0,0看起來沒有作用，實際上不是，還有一種沒有特殊性的規則，0，0，0，0要比沒有特殊性更特殊，下面會介紹。
CSS還有一個!important標簽，用來改變CSS規則的特殊性。實際上，在解析CSS規則特殊性的時候，是將具有!important的規則和沒有此標簽的規則利用上述方法分別計算特殊性，分別選出特殊性最高的規則。最終合并的時候，具有任何特殊性的帶有!important標記的規則勝出。#p#
二、CSS繼承
所謂繼承，就是父元素的規則也會適用于子元素。比如給body設置為color:Red;那么他內部的元素如果沒有其他的規則設置，也都會變成紅色。繼承得來的規則沒有特殊性。下面看一個簡單的例子：
ExampleSourceCode
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>CSSCascadetitle>
- <styletypestyletype="text/CSS">
- *{color:Blue;}
- div{color:Black;}
- .imp{color:Red!important;}
- #content{color:Green;}
- style>
- head>
- <body>
- <div>Hello<span>div-CSS.netspan>div>
- <dividdivid="content">
- <pclasspclass="imp">Titlep>
- ContentGoesHere.
- div>
- body>
- html>
注意，第一行的CSS并沒有繼承div的黑色，這是因為通配符的緣故。通配符的特殊性雖然是全0，但是還是比繼承的特殊性要高。第二行展示了!important標記的作用。
另外，一些明顯不應該繼承的屬性，比如border,margin,padding之類的是不會被繼承的，具體可以參考CSS手冊。
三、其他
雖然有4個整數來表示一個特殊性，仍然有可能出現兩條沖突的規則的特殊性完全一致的情況，此時就按照CSS規則出現的順序來確定，在樣式表中最后一個出現的規則勝出。一般不會出現這樣的情況，只有一個情況例外，考慮如下樣式表：
ExampleSourceCode
- :active{color:Red;}
- :hover{color:Blue;}
- :visited{color:Purple;}
- :link{color:Green;}
這樣頁面中的鏈接永遠也不會顯示紅色和藍色，因為一個鏈接要么被訪問過，要么沒有被訪問過。而這兩條規則在最后，因此總會勝出。如果改成這樣:
ExampleSourceCode
- :link{color:Green;}
- :visited{color:Purple;}
- :hover{color:Blue;}
- :active{color:Red;}
就能實現鼠標懸停和點擊的瞬間變色的效果。這樣的順序的首字母正好連成“LoVeHA”,這樣的順序被約定俗成的叫做LoveHa規則。特殊性規則從理論上講比較抽象和難懂，但在實踐中，只要樣式表是設計良好的，并不會有太多這方面的困擾，因此本文也不再做深究，更多的技術請參考div-CSS.net的文章更新！
文章來源:Div-CSS.net設計網參考:http://www.div-CSS.net/div_CSS/topic/index.asp?id=9998
【編輯推薦】
