了解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的文章

強制屬性繼承

如果您有一個默認情況下不繼承的屬性,但在子元素中您希望它繼承,您可以將屬性值設置為特殊關鍵字inherit

例如:

body {
 background-color: yellow;
}

p {
 background-color: inherit;
}

強制屬性不繼承

相反,您可能會有一個被繼承的屬性,但您希望它不被繼承。

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

在實踐中,這很少被使用,大部分情況下您只需設置另一個值來覆蓋那個繼承的值。

其他特殊值

除了剛才提到的inheritrevert特殊關鍵字之外,您還可以將任何屬性設置為:

  • initial:如果有默認瀏覽器樣式表可用,則使用該樣式表。否則,如果屬性默認情況下是繼承的,則繼承該值。否則不做任何設置。
  • unset:如果屬性默認情況下是繼承的,則繼承該值。否則不做任何設置。