在CSS中,當一個元素的樣式沒有被指定時,它會從它的父元素繼承樣式。這種繼承可以大大簡化CSS的編寫。在下面的例子中,我們設置了p元素的字體大小為20像素,它的子元素會繼承這個字體大小:
這是一段文本,它被設置了字體大小為20像素。
這是另一段文本,它也被設置為字體大小為20像素。
這是一個內聯元素,它會繼承p元素的字體大小。
在這個例子中,p元素設置了字體大小為20像素,它的兩個子元素也繼承了這個樣式。第三個段落包含一個內聯元素,這個元素也繼承了p元素的字體大小。
有時候我們需要取消繼承的樣式,我們可以使用inherit關鍵字。使用inherit關鍵字會在本來繼承的情況下強制繼承指定屬性。在下面的例子中,我們取消了h1元素的顏色繼承,h1元素的子元素不會繼承h1元素的顏色:
這是一個H1元素,它的顏色是藍色的。
這個H1元素不會繼承父元素的顏色。
在這個例子中,h1元素設置了顏色為藍色,它的子元素也會繼承這個樣式。我們創建了一個包含class="not-inherit"的div元素,h1元素位于這個div元素內部。我們在.not-inherit選擇器中設置了color:inherit;屬性,這樣就取消了h1元素的顏色繼承。因此,這個H1元素不會被設置為藍色。
上一篇css 中第二個子元素