CSS選擇器優(yōu)先級

概念：

瀏覽器通過優(yōu)先級來判斷哪一些屬性值與一個元素最為相關(guān)，從而在該元素上應(yīng)用這些屬性值。優(yōu)先級是基于不同種類選擇器組成的匹配規(guī)則。

優(yōu)先級是如何計(jì)算的？

由高到低分別是

1. 在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
2. 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3. id選擇器
4. 類選擇器
5. 偽類選擇器
6. 屬性選擇器
7. 標(biāo)簽選擇器
8. 通配符選擇器
9. 瀏覽器自定義

復(fù)雜場景時

• 行內(nèi)樣式 <div style="xxx"></div> ==> a
• ID 選擇器 ==> b
• 類，屬性選擇器和偽類選擇器 ==> c
• 標(biāo)簽選擇器、偽元素 ==> d
  每個位置上的數(shù)字越大，選擇器的級別就越高，如果全部相等的時候，寫在后面的選擇器權(quán)重高于寫在前面的選擇器。abcd的權(quán)重依次遞減。

測試

*             {}  /* a=0 b=0 c=0 d=0 -> 0,0,0,0 */
p             {}  /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
a:hover       {}  /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> 0,0,0,3 */
h1+input[type=hidden]{}  /* a=0 b=0 c=1 d=2 -> 0,0,1,1 */
ul ol li.active   {}  /* a=0 b=0 c=1 d=3 -> 0,0,1,3 */
#ct .box p        {}  /* a=0 b=1 c=1 d=1 -> 0,1,1,1 */
div#header:after  {}  /* a=0 b=1 c=0 d=2 -> 0,1,0,2 */
style=""          /* a=1 b=0 c=0 d=0 -> 1,0,0,0 */

在這個測試中沒有寫@import，在正常情況下，不要使用import，他會讓我們引用的CSS文件中的樣式覆蓋當(dāng)前的樣式。