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