3.继承-灵析社区

一、什么是继承？

CSS 属性分为非继承属性和继承属性，继承属性的默认值为父元素的该属性的计算值，非继承属性和根元素的继承属性的默认值为初始值。

对于非继承属性，可以显示的声明属性值为 inherit，让子元素的属性继承父元素。

常见的继承属性：

字体 font 系列
文本 text-align text-ident line-height letter-spacing
颜色 color
列表 list-style
可见性 visibility
光标 cursor

容易被误认为继承属性的非继承属性：

透明度 opacity
背景 background系列

二、如何重置元素的属性值到初始值？

属性值initial可以将属性设为W3C规范初始值

属性all可以将元素的所有属性重置

在规范之外，浏览器还会为部分元素，如表单元素设置默认样式

属性的值来源于开发者定义，用户配置和浏览器默认

all:initial相当于清空了用户配置和浏览器默认样式

工作中，我们更希望重置到默认样式，而不是清空它们

all:revert属性还原。可以将子元素的属性重置按如下规则重置：

继承属性：重置到父元素的属性值
非继承属性或父元素继承属性都未设置：重置到用户配置和浏览器默认属性

示例：

<style>
button {
color: yellow;
border: 1px solid red;
background-color: red;
}
button:nth-of-type(2) {
all: initial; /* 清空按钮的样式 */
color: blue;
}
button:last-of-type {
all: revert; /* 保留按钮的默认样式 */
color: blue;
}
</style>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>