原來css 套用是有優先權高低的

這邊說得不完全是 inline &  link 的權重,而是 如果處於同樣的等級(ex: 同樣處於引入的css檔案),套用上去的還是有差。

我一直以為是後面的蓋掉前面的,但其實不完全如此,因為我最近碰到好幾次 @@,都想不通是什麼道理(那時候搜尋也沒看到….),看了這篇文章: Don’t use !important 才知道為什麼  =.=  。

簡單的說就是如果有一個div 長這樣

<div id="aa"></div>

你先這樣寫

#aa{  color:red}

然後之後再這樣寫

div{color: blue}

就算 div 的設定  之後才被讀入,也還是不會蓋過去喔!!! 為什麼好多css的書都沒寫,還是我眼殘呢?   我真的不記得有在書上看到阿!!!!

ref: 6.4.3 Calculating a selector’s specificity

p.s 計算方式

*             {}  /* 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 */

3 thoughts on “原來css 套用是有優先權高低的

  1. 因為 css 的階層性的關係吧🙂
    #aa 有指涉特定元素,所以不會被後出現的泛用指涉所蓋掉…

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s