以下轉自網際網路
下面看看官方對選擇器的定義:
一個選擇器的優先順序由四個數字a,b,c,d確定。當比較兩個選擇器時,先比較a,a值大的優先順序高,如果a相等則比較b,b值大的優先順序高,以此類推。因此,無論b的值多大,也不會對a值的比較造成影響。
a由style確定,如果一個屬性由元素上的style屬性定義則a為1,否則a為0
b是id的數量
c是class和偽類以及屬性的數量
d是tagname以及偽元素的數量
按照這個規則,我們來看看下面這個選擇器的優先順序:
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */