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,因為使用它會影響頁面的布局