CSS的繼承(inheritance)是一種非常有用的特性,它可以讓子元素繼承父元素的樣式,這樣我們就不必重復地定義一些樣式了。
舉個例子,假設我們有一個網站頁面,其中所有標題都需要有一個下劃線。如果我們使用以下的CSS代碼:
h1 { text-decoration: underline; } h2 { text-decoration: underline; } h3 { text-decoration: underline; }
那么我們就需要為每個標題都單獨指定下劃線,這樣會非常繁瑣。但如果我們使用繼承,代碼就會變得非常簡潔:
h1, h2, h3 { text-decoration: underline; }
這樣在同一個頁面中所有的標題都會帶上下劃線。
當然,繼承不是所有屬性都可以繼承的,我們可以使用CSS屬性inherit指定哪些屬性應該被繼承:
div { font-size: 16px; color: red; } p { font-size: inherit; }
上面的代碼指定了一個div元素和一個p元素,div元素的字體大小是16px,顏色是紅色。而p元素的字體大小是繼承自父元素div的字體大小。因此p元素的字體大小也是16px。
需要注意的是,繼承是有優先級的。如果你在子元素中也指定了某個屬性,那么它將覆蓋父元素的屬性。例如:
div { font-size: 16px; color: red; } p { font-size: 18px; }
上面的代碼指定了一個div元素和一個p元素,div元素的字體大小是16px,顏色是紅色。而p元素的字體大小是18px,它覆蓋了父元素div的字體大小。
在編寫CSS時,使用繼承可以使代碼更加簡潔易讀,但也需要注意優先級的問題。