CSS權重

在CSS中,我們一般都會知道,id選擇器優先於class選擇器,內聯樣式優先於外部引用的樣式等等。其實對於CSS權重的問題,是有着明確的計算規則的。

在CSS中對於各種選擇符做了以下的規定:

  • 元素選擇器——1 points
  • 類選擇器    ——10 points
  • ID選擇器    ——100 points
  • html內部的內聯樣式——1000 points
  • 通配符        ——0 points
  • !important  ——優先應用

 因此,對於每一個選擇符,根據上述的規則得到各項對應的權重,相加後就得到了該選擇符的權重。

注:這裏的相加不存在進位的概念,即不會說十個類選擇器加到一起就進位到ID選擇器。


示例如下:

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

最後上福利!請戳Calculating a selector's specificity


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章