在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