04-層疊性權重相同處理
阿新 • • 發佈:2019-01-09
層疊性權重相同處理
第一種現象:當權重相同時,以後來設定的屬性為準,前提一定要權重相同
#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,因為使用它會影響頁面的佈局