九、CSS 特性 --- 继承性(子承父业)

78 阅读1分钟

继承性理解

子元素默认有继承父元素样式的特点,简单来说就是子承父业

通常文字控制属性都可以继承,例如:文字颜色 color,字体样式,文本样式等控制文字的标签

我们可以通过调试工具来判断样式是否可以继承:

image.png

继承性应用场景

继承性在一定程度上可以减少代码冗余,例如:

1)统一不同浏览器默认的文字大小,可以直接给 body 标签设置统一的 font-size

2)大多数情况下,要用到除去小圆点的无序列表,可以直接给 ul 设置 list-style:none 属性,从而去除默认的样式

有时继承会失效

如果元素在浏览器中有默认样式,此时继承性就会失效,但它依然存在,只是浏览器会优先显示浏览器的默认样式:

如下例中,父元素设置了颜色和字体大小,但在浏览器中,超链接有它默认的颜色,h 系列标签也有其默认的字体大小,所以这里虽然继承了父元素的样式,但属性失效,优先显示了浏览器的默认样式

image.png

单独设置样式,就会覆盖浏览器的默认样式:

image.png