CSS選擇器優先級 2016-03-31 #css #css選擇器 #css選擇器優先級

前段時間搬家了 然后隔壁搬來了一個前端妹紙,

然而跟著妹紙學到了很多知識，比如：本文，嘿嘿嘿你懂得～

問題

有如下html代碼：

        ALink

如果設置css樣式：

#b a{
    color:red;
}
#a{
    
    color: green;
}

問題：#b a生效，還是#a生效～

然而我的回答是：#a

但是結果是：

呵呵

原理

以下全部是我家隔壁那個親愛的可愛的萌萌噠的前端妹紙科普的知識，

css的選擇器優先級分別為：

• 標簽選擇器：1
• 類選擇器：10
• ID選擇器：100

現在來解釋上面為何打臉了，

因為#b a中選擇器權重一共是101,而#a的權重為100 故#b a生效。

特例

如果我們給#a的css后加上!important

那么#a的優先級變為最高，甚至比在html標簽上加style的優先級還要高。

比如如下代碼：

?
?
?
? CSS Test
?
#a{

            color: green !important;
        }

?
?
?
? ALink

?
?

顯示的結果是加了!important設置的顏色

感謝我家隔壁的前端妹紙,給我科普前端知識～