css結構和重疊之選取器的特殊性

在使用css對html文檔聲明樣式的時候，一般情況（即不考慮使用者進行樣式設定，只考慮開發人員和使用者代理程式-瀏覽器-）下，頁面樣式最終的體現是開發人員所寫的樣式和瀏覽器預設樣式的最終合作結果。實際上，從比較淺的層次來講的話，使用者代理程式的樣式無需考慮在內，一是因為使用者代理程式的樣式一般是display之類的基本樣式，而並非網頁中最具有展現意義的color、float等樣式；二則是因為使用者代理程式的樣式與開發人員的樣式相比較，總是後者優先。

因此，在基本的hml文檔中樣式的處理上（常規情況下），把頁面內嵌，內聯和外鏈的樣式搞清楚基本上就可以比較好的展示網頁了。

在這種常規情況下，對於css樣式的聲明，就會有一個問題，即選取器的特殊性（如下所示）：使用不同的選取器選取到同一個div元素並進行樣式聲明，而且部分樣式聲明有重複，因為樣式聲明最終只能取一個值，如background只能是一個顏色。因此，要在應用樣式之前，首先對這些選取器進行比較，比較的方法則是按一定規則將選取器換算成數值，比較數值的大小，大的則勝出，該選取器對應的樣式聲明也會優先執行，從而覆蓋其他選取器中相同的聲明。

<style type="text/css">*{ background: black;   color:#fff;}/*0.0.0.0*/div{ background: blue;     width: 100px;     height: 100px;}/*0.0.0.1*/.myDiv{ background: yellow;} /*0.0.1.0*/   body div{ background: green;}/*0.0.0.0*/#myDiv { background: red;/*0.1.0.0*/}</style><div id="myDiv" class="myDiv">測試用盒子</div>

 

以上述代碼為例：

首先要明確換算規則（比較選取器的前提-將其換算成值）：

（1）id選取器為0.1.0.0；

（2）類，偽類別選取器為0.0.1.0；

（3）元素標籤，虛擬元素為0.0.0.1；

（4）萬用字元*為0.0.0.0

根據該規則將上述樣式換算如下：

*{ background: black;   color:#fff;}/*0.0.0.0*/div{ background: blue;     width: 100px;     height: 100px;}/*0.0.0.1*/.myDiv{ background: yellow;} /*0.0.1.0*/   body div{ background: green;}/*0.0.0.0*/#myDiv { background: red;/*0.1.0.0*/}

可見，#myDiv的值最大，因此在對重複的樣式聲明background進行賦值的時候就會優先採取{background:red;}，最終顯示背景色為紅色。所以，對於選取器的特殊性是針對“同一個或一些元素採取了不同的選取器進行樣式聲明，且含有重複聲明的”的情況的。

二、對於特殊性還要注意的一點就是!important聲明和內聯樣式。

（1）當標籤自身含有style屬性時，即內聯樣式存在的時候，內聯樣式和選取器樣式（內嵌和外鏈）發生衝突時，內聯優先，雖然不是選取器來聲明樣式，但是其特殊性值為1.0.0.0。

（2）!important聲明。格式為：選取器{聲明：聲明值 !important;}.如.myDiv{ background:yellow !important;},此類樣式優先於所有樣式包括內聯樣式。如上述代碼,如果將

.myDiv{ background: yellow;}換為.myDiv{ background:yellow !important;}那麼，最終的背景顏色將為黃色。