css 選擇器優先順序的計算過程

c3tc3tc3t發表於2016-03-17

以下轉自網際網路

下面看看官方對選擇器的定義:
一個選擇器的優先順序由四個數字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 */

相關文章