在使用css對html文檔聲明樣式的時候，一般情況（即不考慮用戶進行樣式設(shè)置，只考慮開發(fā)者和用戶代理-瀏覽器-）下，頁面樣式最終的體現(xiàn)是開發(fā)者所寫的樣式和瀏覽器默認樣式的最終合作結(jié)果。實際上，從比較淺的層次來講的話，用戶代理的樣式無需考慮在內(nèi)，一是因為用戶代理的樣式一般是display之類的基本樣式，而并非網(wǎng)頁中最具有展現(xiàn)意義的color、float等樣式；二則是因為用戶代理的樣式與開發(fā)者的樣式相比較，總是后者優(yōu)先。

因此，在基本的hml文檔中樣式的處理上（常規(guī)情況下），把頁面內(nèi)嵌，內(nèi)聯(lián)和外鏈的樣式搞清楚基本上就可以比較好的展示網(wǎng)頁了。

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

<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>

?

以上述代碼為例：

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

（1）id選擇器為0.1.0.0；

（2）類，偽類選擇器為0.0.1.0；

（3）元素標簽，偽元素為0.0.0.1；

（4）通配符*為0.0.0.0

根據(jù)該規(guī)則將上述樣式換算如下：

*{ 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的值最大，因此在對重復(fù)的樣式聲明background進行賦值的時候就會優(yōu)先采取{background:red;}，最終顯示背景色為紅色。所以，對于選擇器的特殊性是針對“同一個或一些元素采取了不同的選擇器進行樣式聲明，且含有重復(fù)聲明的”的情況的。

二、對于特殊性還要注意的一點就是!important聲明和內(nèi)聯(lián)樣式。

（1）當標簽自身含有style屬性時，即內(nèi)聯(lián)樣式存在的時候，內(nèi)聯(lián)樣式和選擇器樣式（內(nèi)嵌和外鏈）發(fā)生沖突時，內(nèi)聯(lián)優(yōu)先，雖然不是選擇器來聲明樣式，但是其特殊性值為1.0.0.0。

（2）!important聲明。格式為：選擇器{聲明：聲明值 !important;}.如.myDiv{ background:yellow !important;},此類樣式優(yōu)先于所有樣式包括內(nèi)聯(lián)樣式。如上述代碼,如果將

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

轉(zhuǎn)載于:https://www.cnblogs.com/qiwenke/archive/2012/10/09/2717480.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。