顺序如下:
css属性!important
内联样式 ------->1000
ID选择器(#id) --->0100
类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等] --> 0010
元素选择器(p等) = 伪元素选择器(:after/:before/::selection等) --> 0001
通用选择器(*) 0000
继承的样式 只有继承的样式的时候, 就近原则, 优先级最低
伪类（ :not(选择器) 伪类不参与优先级计算，但:not(选择器) 里边的 “选择器” 是参与优先级计算的 这部分
先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；
低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的,也就是优先级计算不升位, 如下:
Q1 = 100 + 1 = 101 ---> red
Q2 = 1 + 10*11 + 1 = 112 ---> green
Q1 < Q2
结果是red