CSS繼承

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

當在CSS中的選擇器上設置一些屬性時，這些屬性會被該選擇器的所有子元素繼承。

我說的是一些，因為並不是所有的屬性都表現出這種行為。

這是因為有些屬性被繼承是有意義的。這幫助我們更簡潔地撰寫CSS，因為我們不需要在每個子元素上再次明確設置這些屬性。

而其他一些屬性則更有意義不被繼承。

想想字體：您不需要將 font-family 應用於您網頁的每個標籤。您只需設置 body 標籤的字體，每個子元素都會繼承它和其他屬性。

另一方面，background-color 屬性被繼承很少有意義。

可繼承的屬性

以下是一個可繼承屬性的列表。該列表並不全面，但這些規則通常是您會使用到的最流行的：

這些資訊取自這篇來自Sitepoint的文章。

強制屬性繼承

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

例如：

body {
 background-color: yellow;
}

p {
 background-color: inherit;
}

強制屬性不繼承

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

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

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

其他特殊值

除了剛才提到的inherit和revert特殊關鍵字之外，您還可以將任何屬性設置為：

tags: [“CSS”, “Inheritance”, “可繼承屬性”, “屬性繼承”, “網頁設計”]