了解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
特殊關鍵字之外,您還可以將任何屬性設置為:
initial
:如果有默認瀏覽器樣式表可用,則使用該樣式表。否則,如果屬性默認情況下是繼承的,則繼承該值。否則不做任何設置。unset
:如果屬性默認情況下是繼承的,則繼承該值。否則不做任何設置。