技術標籤：選擇器優先順序

CSS選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。

樣式表優先順序

相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。

樣式表有兩個來源：1.瀏覽器預設樣式 2.使用者自定義樣式

大家應該知道，不同瀏覽器都會給一些html常用標籤新增一些預設的樣式，這就是瀏覽器預設樣式表，這也是我們寫相容樣式的來源。

使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆蓋瀏覽器的預設樣式。市面上也出現了統一的瀏覽器樣式的css庫：reset.css和normalize.css。

所以我們可以得知：使用者樣式表的優先順序大於瀏覽器預設樣式表

行內樣式

什麼是行內樣式？

行內樣式就是在html元素使用style屬性寫樣式，這就稱為行內樣式，比如：

宣告

我們看到a標籤就使用了行內樣式。

想要覆蓋行內樣式必須給樣式加上！important關鍵詞才可以。

li>a{background-color:bule !important}

只有important關鍵字的樣式宣告才能覆蓋行內樣式，但是如果行內樣式也加上了important關鍵字，那麼這個樣式的優先順序將是最高，無法在覆蓋,比如：

宣告

選擇器

我們大家都知道，選擇器分三類，即ID，class，標籤這三種選擇器，優先順序也是ID>class>標籤。

準確的選擇器優先順序規則

1.首先比較ID選擇器，ID選擇器多的樣式勝出，比如：

#main #content{color:font-size:14px}/*勝出*/#content{color:font-size:16px}

2.ID數量一致，則比較class的數量，class數量多的樣式勝出，比如：

  #content .text {font-size:14px}  #content .text .span{font-size:16px}/*勝出*/

3.ID和class都一致，則比較標籤的數量

  #content .text div{font-size:14px}  #content .text div span{font-size:16px}/*勝出*/
 

選擇器優先順序標記

我們一般會用三個數字的數值形式來進行優先順序標記，每個數字用逗號隔開。

比如：1,2,3這個數值則表示選擇器是由：1個ID，2個class，3個標籤組成，第一位表示ID，第二位表示class，第三位表示標籤。

例子：

  #content .text div{font-size:14px}/*優先順序標記：1,1,1*/  #content .text div span{font-size:16px}/*優先順序標記：1,1,2*/

大家自然也可以想到，把三個數字看著一個整數，數值越大，優先順序也就越高

原始碼順序

如果在樣式表和選擇器優先順序都是平級的情況下，那麼就將會通過原始碼順序來判定，原始碼出現的較晚的樣式將會覆蓋掉前面的樣式。

我們大家在寫媒體查詢的時候自然都會將覆蓋樣式寫在普通樣式下面，而不是上面，這樣才能覆蓋。

   div a{     font-size: 16px;   }   @media screen and (max-width: 768px){     div a{       font-size: 12px;     }   }

如果你將媒體查詢的樣式放在普通樣式上方，那麼即使將螢幕寬度縮小到768px這不會覆蓋普通樣式，因為這兩個樣式是平級，優先順序是通過原始碼順序來決定。

注：!important宣告的樣式優先順序大於一切。