之前理解的css選擇器優先順序是這樣的
!important >內聯樣式> id > class > 元素選擇器 > 偽元素

看了一下w3c的文件規範，發現壓根沒有我想的這麼簡單

!important > 內聯樣式 沒有變化

先說說有哪些選擇器：

1. 型別選擇器（type selectors）（例如, h1）
2. 偽元素（pseudo-elements）（例如, ::before）
3. 類選擇器（class selectors） (例如,.example)
4. 屬性選擇器（attributes selectors）（例如, [type="radio"]），
5. 偽類（pseudo-classes）（例如, :hover）
6. ID選擇器（例如, #example）
7. 通用選擇器（universal selector）(*)
8. 組合子（combinators） (+, >, ~, ' ')
9. 否定偽類（negation pseudo-class)(屬於偽元素)(:not)

這些元素的特異性如下

• ID選擇器的個數(=a)
• 類選擇器、屬性選擇器、偽類的個數(=b)
• 型別選擇器、屬性選擇器、偽元素的個數(=c)

連線abc為一個三位數，計算他們的優先順序：

*               /* a=0 b=0 c=0 -> 優先順序 =   0 */
LI              /* a=0 b=0 c=1 -> 優先順序 =   1 */
UL LI           /* a=0 b=0 c=2 -> 優先順序 =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> 優先順序 =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> 優先順序 =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> 優先順序 =  13 */
LI.red.level    /* a=0 b=2 c=1 -> 優先順序 =  21 */
#x34y           /* a=1 b=0 c=0 -> 優先順序 = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> 優先順序 = 101 */
 

參考連結：
css3選擇器w3c標準
css2選擇器w3c標準
MDN