對于前端開發(fā)人員來說,CSS 是必備技能之一。在 CSS 中,有一種特性叫做繼承性,指的是某些樣式屬性會繼承其祖先元素的樣式屬性。接下來,我們就來介紹一些 CSS 屬性的繼承性。
1. font 系列屬性父元素中的font-size
、font-family
、font-weight
、font-style
、font-variant
等屬性都具有繼承性,這些屬性會跟隨祖先元素的樣式屬性而改變。2. color 系列屬性父元素中的color
屬性也具有繼承性,但是需要注意的是當(dāng)其祖先元素同時存在color
屬性時,子元素會繼承最近祖先元素的color
屬性。3. line-height 屬性父元素中的line-height
屬性同樣具有繼承性,但是需要注意的是當(dāng)其祖先元素同時存在line-height
屬性時,子元素會繼承最近祖先元素的line-height
屬性。4. text- 系列屬性父元素中的text-align
、text-indent
、text-transform
、text-decoration
等屬性都具有繼承性,這些屬性會跟隨祖先元素的樣式屬性而改變。但需要注意的是text-decoration
屬性不能繼承給鏈接。5. list- 系列屬性父元素中的list-style
屬性也具有繼承性,這些屬性會跟隨祖先元素的樣式屬性而改變。6. visibility 屬性父元素中的visibility
屬性同樣具有繼承性,這些屬性會跟隨祖先元素的樣式屬性而改變。7. cursor 屬性父元素中的cursor
屬性也具有繼承性,這些屬性會跟隨祖先元素的樣式屬性而改變。
在實際開發(fā)中,我們可以利用 CSS 屬性的繼承性來避免冗余代碼。例如,我們可以為所有的文本設(shè)置一個字體大小和行高,在特定元素下重新定義這些屬性來達(dá)到差異化的視覺效果。