一、CSS層疊

  我們知道文檔中的一個元素可能同時被多個css選擇器選中，每個選擇器都有一些css規(guī)則，這就是層疊。這些規(guī)則有可能不矛盾的，自然這些規(guī)則將會同時起效，然而有些規(guī)則是相互沖突的，例如：

  最終得到結(jié)果就是這個規(guī)則的特殊性。兩個特殊性的比較類似字符串大小的比較，是從左往右依次比較，第一個數(shù)字大的規(guī)則的特殊性高。上例中兩條規(guī)則的特殊性分別是0，0，0，1 和 0,0,0,2，顯然第二條勝出，因此最終字是藍(lán)色的。
  注意，通配符的特殊性0,0,0,0看起來沒有作用，實(shí)際上不是，還有一種沒有特殊性的規(guī)則，0，0，0，0要比沒有特殊性更特殊，下面會介紹。
  css還有一個!important標(biāo)簽，用來改變css規(guī)則的特殊性。實(shí)際上，在解析css規(guī)則特殊性的時候，是將具有!important的規(guī)則和沒有此標(biāo)簽的規(guī)則利用上述方法分別計算特殊性，分別選出特殊性最高的規(guī)則。最終合并的時候，具有任何特殊性的帶有!important標(biāo)記的規(guī)則勝出。

二、CSS繼承

  所謂繼承，就是父元素的規(guī)則也會適用于子元素。比如給body設(shè)置為color:Red;那么他內(nèi)部的元素如果沒有其他的規(guī)則設(shè)置，也都會變成紅色。繼承得來的規(guī)則沒有特殊性。下面看一個簡單的例子：

 
  注意，第一行的Css并沒有繼承div的黑色，這是因?yàn)橥ㄅ浞木壒?。通配符的特殊性雖然是全0，但是還是比繼承的特殊性要高。第二行展示了!important標(biāo)記的作用。
  另外，一些明顯不應(yīng)該繼承的屬性，比如border,margin,padding之類的是不會被繼承的，具體可以參考css手冊。

三、其他

  雖然有4個整數(shù)來表示一個特殊性，仍然有可能出現(xiàn)兩條沖突的規(guī)則的特殊性完全一致的情況，此時就按照css規(guī)則出現(xiàn)的順序來確定，在樣式表中最后一個出現(xiàn)的規(guī)則勝出。一般不會出現(xiàn)這樣的情況，只有一個情況例外，考慮如下樣式表：

  就能實(shí)現(xiàn)鼠標(biāo)懸停和點(diǎn)擊的瞬間變色的效果。這樣的順序的首字母正好連成 “LoVe HA”,這樣的順序被約定俗成的叫做Love Ha 規(guī)則。特殊性規(guī)則從理論上講比較抽象和難懂，但在實(shí)踐中，只要樣式表是設(shè)計良好的，并不會有太多這方面的困擾，因此本文也不再做深究，更多的技術(shù)請參考mf1288.com的文章更新！