CSS中的繼承屬性是指當一個元素設置了某個屬性,其子元素會自動繼承該屬性,無需重新設置。那么CSS能繼承嗎?答案是肯定的,但并非所有屬性都能繼承。
/* 示例 */ body { color: red; /* 能被繼承 */ font-family: Arial; /* 能被繼承 */ background-color: #eee; /* 不能被繼承 */ border: 1px solid black; /* 不能被繼承 */ }
能被繼承的屬性有:
- color:文本顏色
- font-family:字體
- font-size:字號
- font-weight:字重
- line-height:行間距
- text-align:文本對齊方式
- text-decoration:文本裝飾(如下劃線)
- text-transform:文本大小寫轉換
不能被繼承的屬性有:
- background
- border
- display
- float
- height
- margin
- padding
- position
- width
- z-index
如果想讓一個不可被繼承的屬性繼承到下級元素,需要使用“all”屬性:
/* 示例 */ div { background-color: #eee; all: inherit; /* 所有屬性都能被繼承 */ }
在實際應用中,我們可以通過繼承來統一設置網頁中的一些公共樣式,減少代碼重復。
上一篇css能繼承的屬性嗎
下一篇vue獲取域名