08-層疊性權重相同處理

直接上代碼，看效果！

第一種現象：當權重相同時，之後來設置的屬性爲準，前提必定要權重相同

#box2 .wrap3 p{
    color: yellow;
}
        
#box1 .wrap2 p{
    color: red;
}

咱們會發現此時顯示的是紅色的。

 

第二種現象： 第一個選擇器沒有選中內層標籤，那麼它是經過繼承來設置的屬性，那麼它的權重爲0。第二個選擇器選中了內層標籤，有權重。

因此 繼承來的元素 權重爲0。跟選中的元素沒有可比性。

#box1 #box2 .wrap3{
    color: red;
}
#box2 .wrap3 p{
    color: green;
}

咱們會發現此時顯示的是綠色的。

 

第三種現象：若是都是繼承來的屬性，誰描述的近，顯示誰的屬性。'就近原則'

#box1 #box2 .wrap3{
    color: red;
}
 .wrap1 #box2{
    color: green;
}

 

!important 的使用。

！important:設置權重爲無限大
!important 不影響繼承來的權重，隻影響選中的元素。不要隨便使用!important,由於使用它會影響頁面的佈局