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的文章。 強制屬性繼承 如果您有一個默認情況下不繼承的屬性,但在子元素中您希望它繼承,您可以將屬性值設置為特殊關鍵字inherit。 例如: body { background-color: yellow; } p { background-color: inherit; } 強制屬性不繼承 相反,您可能會有一個被繼承的屬性,但您希望它不被繼承。 您可以使用revert關鍵字將其還原。在這種情況下,該值會還原為瀏覽器在其默認樣式表中為其提供的原始值。 在實踐中,這很少被使用,大部分情況下您只需設置另一個值來覆蓋那個繼承的值。 其他特殊值 除了剛才提到的inherit和revert特殊關鍵字之外,您還可以將任何屬性設置為:...