样式继承的目的是为了更好地适应页面变化,也就是修改样式时让页面更平滑地过度:设置父元素时希望子元素样式保持统一,那么就继承,如果继承后页面属性变化比较突兀,就不应该继承,比如我设置了 div 的字体大小,那么就希望其子元素的字体大小均被继承的,但对于盒模型属性、定位属性这种 “比较私有” 的属性,如果继承了,反而比较突兀。
常见的可继承属性有:
- 字体系列属性: font-size 等
- 文本系列属性: text-align 等
- 其他: visibility 、 cursor 等
其余基本都是默认不可继承的,因为样式继承容易造成界面发生非预期的不可控变化。
实际上,所有属性都是可继承的,上面说的不可继承是指默认不可继承,如果需要继承某属性,我们可以使用 inherit 属性值来规定:
div > p {
border: inherit;
}
如果希望所有属性都继承,则使用 all: inherit; 来控制。