css層疊 權重

權重決定了哪一條規則會被瀏覽器應用在元素上

層疊的過程
比較優先級：優先級低，淘汰，優先級高，勝出，相同則比較特殊性
比較特殊性：特殊性低，淘汰，特殊性高，勝出，並列則比較源次序
比較源次序：源次序靠前，淘汰，源次序靠後，勝出
若屬性值後跟上！important，則表示是一條重要聲明

這裏將選擇器分爲了a b c d四類  若選擇器中有style 則a類加1 不然爲0

如：兩個不一樣的選擇器都選中了同一個p標籤    

#main .content p{

　　　　　　　　　　color：green；

　　}

這裏#main是id選擇器 則b類加1，  .content  爲class選擇器 則c類加1，  p是元素 則d類加1  最終結果爲{0,1,1,1}

a:hover p{

　　color：red；

}

這裏a:hover爲僞類 則c類加1  ， p是元素 則d類加1  最終結果爲{0,0,1,1}

如今比較兩個數組{0,1,1,1}和{0,0,1,1}   顯而易見  {0,1,1,1}要大  則運行#main .content p中的樣式  

優先級：！important>style>id>class>元素>*

 

另外一種較簡單的方式權重記憶口訣

！important   正無窮大

一個行內樣式   +1000

一個id   +100

一個屬性選擇器/class或者僞類   +10

一個元素名或者僞元素   +1

算出來的最終結果值最大則運用誰的樣式

若是值相同 則使用後出現的選擇器的樣式