深入剖析CSS層疊與繼承的使用
你對(duì)CSS層疊和繼承的概念和用法你是否熟悉，這里和大家分享一下，文檔中的一個(gè)元素可能同時(shí)被多個(gè)CSS選擇器選中，每個(gè)選擇器都有一些CSS規(guī)則，這就是層疊，而所謂繼承，就是父元素的規(guī)則也會(huì)適用于子元素。
CSS技術(shù)理論：CSS層疊與繼承
一、CSS層疊
我們知道文檔中的一個(gè)元素可能同時(shí)被多個(gè)CSS選擇器選中，每個(gè)選擇器都有一些CSS規(guī)則，這就是CSS層疊。這些規(guī)則有可能不矛盾的，自然這些規(guī)則將會(huì)同時(shí)起效，然而有些規(guī)則是相互沖突的，例如：
Example Source Code
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>CSS Cascadetitle>
- <style type="text/CSS">
- h1{color:Red;}
- body h1{color:Blue;}
- style>
- head>
- <body>
- <h1>Hello 52CSS.comh1>
- body>
- html>
為此需要為每條規(guī)則制定特殊性，當(dāng)發(fā)生沖突的時(shí)候必須選出一條***特殊性的規(guī)則來(lái)應(yīng)用。CSS規(guī)則的特殊性可以用4個(gè)整數(shù)來(lái)表示，例如0，0，0，0.計(jì)算規(guī)則如下：
◆對(duì)于規(guī)則中的每個(gè)ID選擇符，特殊性加0，1，0，0
◆對(duì)于規(guī)則中每個(gè)類選擇符和屬性選擇符以及偽類，特殊性加0，0，1，0
◆對(duì)于規(guī)則中的每個(gè)元素名或者偽元素，特殊性加0，0，0，1
◆對(duì)于通配符，特殊性加0，0，0，0.
◆對(duì)于內(nèi)聯(lián)規(guī)則，特殊性加 1，0，0，0
最終得到結(jié)果就是這個(gè)規(guī)則的特殊性。兩個(gè)特殊性的比較類似字符串大小的比較，是從左往右依次比較，***個(gè)數(shù)字大的規(guī)則的特殊性高。上例中兩條規(guī)則的特殊性分別是0，0，0，1 和 0,0,0,2，顯然第二條勝出，因此最終字是藍(lán)色的。
注意，通配符的特殊性0,0,0,0看起來(lái)沒(méi)有作用，實(shí)際上不是，還有一種沒(méi)有特殊性的規(guī)則，0，0，0，0要比沒(méi)有特殊性更特殊，下面會(huì)介紹。
CSS還有一個(gè)!important標(biāo)簽，用來(lái)改變CSS規(guī)則的特殊性。實(shí)際上，在解析CSS規(guī)則特殊性的時(shí)候，是將具有!important的規(guī)則和沒(méi)有此標(biāo)簽的規(guī)則利用上述方法分別計(jì)算特殊性，分別選出特殊性***的規(guī)則。最終合并的時(shí)候，具有任何特殊性的帶有!important標(biāo)記的規(guī)則勝出。#p#
二、CSS繼承
所謂CSS繼承，就是父元素的規(guī)則也會(huì)適用于子元素。比如給body設(shè)置為color:Red;那么他內(nèi)部的元素如果沒(méi)有其他的規(guī)則設(shè)置，也都會(huì)變成紅色。CSS繼承得來(lái)的規(guī)則沒(méi)有特殊性。下面看一個(gè)簡(jiǎn)單的例子：
Example Source Code
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>CSS Cascadetitle>
- <style type="text/CSS">
- *{color:Blue;}
- div{color:Black;}
- .imp{color:Red !important;}
- #content{color:Green;}
- style>
- head>
- <body>
- <div>Hello <span>52CSS.comspan> div>
- <div id="content">
- <p class="imp">Titlep>
- Content Goes Here.
- div>
- body>
- html>
注意，***行的CSS并沒(méi)有繼承div的黑色，這是因?yàn)橥ㄅ浞木壒?。通配符的特殊性雖然是全0，但是還是比繼承的特殊性要高。第二行展示了!important標(biāo)記的作用。
另外，一些明顯不應(yīng)該繼承的屬性，比如border,margin,padding之類的是不會(huì)被CSS繼承的，具體可以參考CSS手冊(cè)。
三、其他
雖然有4個(gè)整數(shù)來(lái)表示一個(gè)特殊性，仍然有可能出現(xiàn)兩條沖突的規(guī)則的特殊性完全一致的情況，此時(shí)就按照CSS規(guī)則出現(xiàn)的順序來(lái)確定，在樣式表中***一個(gè)出現(xiàn)的規(guī)則勝出。一般不會(huì)出現(xiàn)這樣的情況，只有一個(gè)情況例外，考慮如下樣式表：
Example Source Code
- :active{color:Red;}
- :hover{color:Blue;}
- :visited{color:Purple;}
- :link{color:Green;}
這樣頁(yè)面中的鏈接永遠(yuǎn)也不會(huì)顯示紅色和藍(lán)色，因?yàn)橐粋€(gè)鏈接要么被訪問(wèn)過(guò)，要么沒(méi)有被訪問(wèn)過(guò)。而這兩條規(guī)則在***，因此總會(huì)勝出。如果改成這樣:
Example Source Code
- :link{color:Green;}
- :visited{color:Purple;}
- :hover{color:Blue;}
- :active{color:Red;}
就能實(shí)現(xiàn)鼠標(biāo)懸停和點(diǎn)擊的瞬間變色的效果。這樣的順序的首字母正好連成 “LoVe HA”,這樣的順序被約定俗成的叫做Love Ha 規(guī)則。特殊性規(guī)則從理論上講比較抽象和難懂，但在實(shí)踐中，只要樣式表是設(shè)計(jì)良好的，并不會(huì)有太多這方面的困擾，因此本文也不再做深究，更多的技術(shù)請(qǐng)參考51cto.com的文章更新！
【編輯推薦】
- CSS層疊與繼承用法手冊(cè)
- 解析Flex中CSS層疊樣式表的應(yīng)用方法
- 全面解析CSS優(yōu)先級(jí)規(guī)則
- 專家推薦 10款優(yōu)秀CSS框架
- 實(shí)例解析清除CSS float浮動(dòng)的三種方法
