在使用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;}那么，最終的背景顏色將為黃色。

轉載于:https://www.cnblogs.com/qiwenke/archive/2012/10/09/2717480.html

總結

以上是生活随笔為你收集整理的css结构和重叠之选择器的特殊性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。