1. 程式人生 > >HTML/CSS 選擇符優先順序

HTML/CSS 選擇符優先順序

CSS的選擇符優先順序

1、同級樣式預設後者覆蓋前者

2、樣式優先順序
型別(1)  <  class[type](10)=偽類(10)  <  id(100)  <  style行間樣式(1000) 
< style內部樣式 < link外部引入樣式

選擇符的對應值綜合相加起來大的優先順序高

注 : 對應值只是代表他們的等級,
    11個型別選擇符的優先順序仍然小於1個類選擇符,以此類推

3、important(IE7及以上)
    加了important的樣式屬性優先順序最高。

    例
        .box{background:red!important
;}

測試:判讀AB的優先順序
A、#header #div1 .box1 div .section p .link{………………}
B、#some .base #font #call a{………………}

方法一:
A= 100+100+10+1+10+1+10 = 232
B= 100+10+100+100+1 = 311 
B>A 

方法二:
AB每人幹掉2個id選擇符,A沒有id選擇符了,B還有一個,所以B優先順序高

答案:B