CSS繼承

了解CSS繼承的含義及其重要性

在CSS中的選擇器上設置某些屬性時,該屬性將由該選擇器的所有子級繼承。

我說一些,因為並非所有屬性都顯示此行為。

發生這種情況是因為可以繼承某些屬性。這有助於我們更加簡潔地編寫CSS,因為我們不必在每個子節點上都再次顯式設置該屬性。

其他一些屬性對不是被繼承。

考慮一下字體:您不需要套用font-family到頁面的每個標籤。您設置body標記字體,每個子代都會繼承它,以及其他屬性。

background-color另一方面,繼承財產幾乎沒有意義。

繼承的屬性

這是可以繼承的屬性的列表。該列表並不全面,但是這些規則只是您可能會使用的最受歡迎的規則:

  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • empty-cells
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font-size-adjust
  • font-stretch
  • font
  • letter-spacing
  • line-height
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
  • orphans
  • quotes
  • tab-size
  • text-align
  • text-align-last
  • text-decoration-color
  • text-indent
  • text-justify
  • text-shadow
  • text-transform
  • visibility
  • white-space
  • widows
  • word-break
  • word-spacing

我是從這裡得到的不錯的Sitepoint文章關於CSS繼承。

強制屬性繼承

如果您有一個默認情況下不繼承的屬性,並且希望在子級中繼承該屬性,該怎麼辦?

在子級中,將屬性值設置為特殊關鍵字inherit

例子:

body {
	background-color: yellow;
}

p { background-color: inherit; }

強制屬性不繼承

相反,您可能繼承了一個屬性,並且您想避免繼承。

您可以使用revert還原它的關鍵字。在這種情況下,該值將還原為瀏覽器在其默認樣式表中為其提供的原始值。

實際上,這很少使用,大多數情況下,您將為屬性設置另一個值以覆蓋該繼承的值。

其他特殊值

除了inheritrevert我們剛剛看到的特殊關鍵字,您還可以將任何屬性設置為:

  • initial:使用默認的瀏覽器樣式表(如果有)。如果不是,並且該屬性默認繼承,則繼承該值。否則什麼都不做。
  • unset:如果屬性默認繼承,則繼承。否則什麼都不做。

免費下載我的CSS手冊


更多CSS教程: