一、特殊性規(guī)則

選擇器的特殊性由選擇器本身的組件確定；特殊性由四個部分組成，其初始值為0，0，0，0。

1. 對于選擇器中的每一個id，加0，1，0，0；

2. 對于選擇器中的每一個類、偽類、屬性選擇，加0，0，1，0；

3. 對于選擇器中的每一個元素、偽元素，加0，0，0，1；

4. 結(jié)合符與通配符對于選擇器的特殊性沒有任何貢獻。

注意：

1. 0，0，1，0的特殊性比0，0，0，13的特殊性更高。

2. 通配符 * 的特殊性為0，0，0，0，它是有特殊性的；結(jié)合符（比如h1+p中的“+”）根本沒有特殊性；繼承而來的樣式也沒有特殊性。

請看如下代碼：

頁面顯示如下：

關(guān)于通配符 * ：由于 * 適用于所有元素，而且有0特殊性，往往會在不經(jīng)意間造成繼承無法實現(xiàn)的情況，應(yīng)該盡量避免使用 * 選擇器。

3. 指定id屬性的屬性選擇器與id選擇器有本質(zhì)區(qū)別，比如：

頁面效果：

4. 行內(nèi)樣式的特殊性最高，為1，0，0，0。

5. 標(biāo)記為!important的聲明被稱為重要聲明，它沒有特殊性，不過要與非重要聲明分開考慮。

具體而言：非重要聲明分為一組，它們之間的沖突使用特殊性解決；重要聲明分為一組，它們之間的沖突內(nèi)部解決；重要聲明總是比非重要聲明優(yōu)先。

二、繼承

1. 繼承沒有任何特殊性，記住這一點往往能明白很多問題。

請看如下代碼：

頁面效果：

為什么設(shè)置了<p>元素的顏色為紅色，<a>元素的顏色卻是藍(lán)色？

這并不是因為<a>元素不繼承父元素的顏色（原諒我之前就是這么認(rèn)為的），而是因為<a>元素繼承了<p>元素的顏色，但是這個繼承來的樣式根本沒有特殊性，然而瀏覽器默認(rèn)樣式中對<a>元素設(shè)置了樣式，很明顯瀏覽器默認(rèn)樣式的特殊性更高，于是<a>元素就按照瀏覽器默認(rèn)樣式顯示。

2. 關(guān)于CSS中的繼承：一般而言，只能子元素繼承父元素的樣式，也就是說樣式在DOM中只能向下傳遞，不能向上；但是有一個例外，應(yīng)用到body元素的背景樣式可以向上傳遞到html元素，相應(yīng)地可以定義其畫布。

三、層疊

層疊規(guī)則：

1. 按權(quán)重排序。讀者重要聲明>作者重要聲明>作者一般聲明>讀者一般聲明>用戶代理聲明。

2. 權(quán)重相同的情況下，按照特殊性排序，特殊性越高的勝出。

3. 特殊性相同的情況下，按照樣式表中的順序排序，后出現(xiàn)的勝出。

btw，正是因為這個規(guī)則，才會使用LoVe-HA的順序聲明鏈接樣式（LoVe-HA 依次為 :link; :visited; :hover; :active）。

最新評論