父繼承樣式指的是樣式會(huì)被傳遞到他的后代元素中。CSS中有一個(gè)屬性叫做inherit,當(dāng)在子元素中設(shè)置屬性為inherit時(shí),它會(huì)繼承它的父元素的屬性。但是有時(shí)候我們希望取消這種繼承樣式,使子元素不受父元素的影響。以下是取消繼承樣式的幾種方法。
1. 使用!important屬性 子元素中屬性值加上!important,這將會(huì)覆蓋掉父元素的繼承樣式,例如: .parent { color: red; } .child { color: blue !important; } 這時(shí)候,子元素文字顏色為藍(lán)色而不是繼承的紅色。
2. 使用none屬性
我們可以使用none屬性,將繼承樣式設(shè)置為無(wú)效。例如: .parent { font-weight: bold; } .child { font-weight: normal; } 這時(shí)候,子元素中文字的加粗樣式就被取消掉了。我們同樣可以使用none屬性取消其他繼承樣式。
3. 使用初始值
CSS中每個(gè)屬性都有一個(gè)初始值,我們可以將屬性設(shè)為這個(gè)初始值來(lái)取消繼承樣式。例如: .parent { font-family: Arial; } .child { font-family: initial; } 這時(shí)候,子元素的文字字體將會(huì)恢復(fù)成默認(rèn)值。同樣,我們可以使用初始值來(lái)取消其他繼承樣式。
總結(jié)
以上是三種取消CSS繼承樣式的方法。但我們應(yīng)當(dāng)謹(jǐn)慎使用!important屬性,因?yàn)樗哂凶罡邇?yōu)先級(jí),而且可能會(huì)導(dǎo)致代碼不易維護(hù)。因此,使用none屬性或初始值是更好的做法。