CSS中的两个特殊值用于控制层叠的inherit和initial的方法

当CSS样式在文档树中呈现时，可能会遇到样式继承和层叠的问题。CSS中的继承和层叠规则可以用一些特殊的值进行控制，例如 inherit和initial。

inherit

inherit是一个CSS属性值，被用于将父元素的样式应用到子元素上。也就是说，子元素继承了父元素的某些样式属性。

例如，假设某个函数库的CSS样式文件定义了以下样式规则：

.parent {
  background-color: #fff;
  color: #333;
  font-size: 16px;
}

如果想为子元素设置与 parent元素相同的样式，可以使用 inherit 选项，例如：

.child {
  background-color: inherit;
  color: inherit;
  font-size: inherit;
}

这样，.child 与 .parent 将具有相同的 background-color、color 以及 font-size 属性。

initial

initial与 inherit 相关，但是其功能完全相反。它将元素的一个或多个样式属性值重置为其初始状态，也就是未被父元素或其他样式规则修改之前的值。

例如，假设我们有以下的HTML和CSS：

<div class="example">Hello, World!</div>

.example {
  background-color: blue;
  color: yellow;
  font-size: 24px;
}

现在我们想将这个元素的文字颜色改回黑色并将其字号改回默认大小（通常为16px）：

.example {
  background-color: initial;
  color: black;
  font-size: initial;
}

这样，.example 的背景颜色将被重置为默认的背景颜色，其文字颜色将被改回黑色（取决于浏览器的默认样式），其字号将被改回16px。

总而言之，inherit将父元素的样式属性值继承到子元素中，而 initial 将CSS属性值重置为默认值。这两个特殊的CSS值非常有用，且能够帮助做出更可靠的设计。