層疊性權重相同處理

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

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