一、背景和意义

在CSS中，inherit、initial、revert是几个相对比较冷门的属性值，很多前端开发者几乎从没用过这几个属性值。但这几个属性值在某些特定场景下非常好用，可以写出更简洁、BUG更少的CSS代码。

inherit、initial和revert这几个特殊值可用于任意属性，用于控制层叠。本文接下来给出几个简单的应用示例。

二、应用示例

2.1 inherit应用示例

假设现在有一段这样的HTML代码：

<style>
  .welcome {
    color: #888;
  }
</style>
<div class="welcome">
  <h1>您好，欢迎来到...</h1>
  <a class="more" href="/more.html">查看更多</a>
</div>

其运行效果为：

页面下方的链接是默认的蓝色，产品或者UI同事可能觉得不好看，想更换成跟上面标题统一的颜色，那么其中一个方法是给链接也加上color: #888属性：

<style>
  .welcome {
    color: #888;
  }
  .more {
    color: #888;
  }
</style>
<div class="welcome">
  <h1>您好，欢迎来到...</h1>
  <a class="more" href="/more.html">查看更多</a>
</div>

得到的结果为：

但CSS代码有两处color: #888，如果某天产品或者UI同事又想把色号#888改成#669或者其他色号，则需要改两个地方。当然，使用变量var可以解决要改多处的问题：

<style>
  :root {
    --main-color: #888;
  }
  .welcome {
    color: var(--main-color);
  }
  .more {
    color: var(--main-color);
  }
</style>
<div class="welcome">
  <h1>您好，欢迎来到...</h1>
  <a class="more" href="/more.html">查看更多</a>
</div>

但更简洁的方法是使用inherit，表示链接继承父元素的color: #888的属性：

<style>
  .welcome {
    color: #888;
  }
  .more {
    color: inherit;
  }
</style>
<div class="welcome">
  <h1>您好，欢迎来到...</h1>
  <a class="more" href="/more.html">查看更多</a>
</div>

其展示效果和上一个截图是一样的。

2.2 initial应用示例

每一个CSS属性都有初始（默认）值，如果将initial值赋给某个属性，那么就会将其重置为默认值，这种操作相当于硬复位该值。其中color属性的默认值为黑色，对应前面的例子，如果将color设置为initial：

<style>
  .welcome {
    color: #888;
  }
  .more {
    color: initial;
  }
</style>
<div class="welcome">
  <h1>您好，欢迎来到...</h1>
  <a class="more" href="/more.html">查看更多</a>
</div>

展示结果将是这样（注意，链接的颜色比上面的标题更黑）：

2.3 revert应用示例

延续前面的例子，但是页面上的链接变多了：

<style>
  .welcome {
    color: #888;
  }
  .more {
    margin-top: 2rem;
    font-size: 0.8rem;
  }
</style>
<div class="welcome">
  <h1>您好，欢迎来到...</h1>
  <div><a href="/chapter1">查看第一章</a></div>
  <div><a href="/chapter2">查看第二章</a></div>
  <div><a href="/chapter3">查看第三章</a></div>

  <div class="more">
    <a href="/more.html">查看更多</a>
  </div>
</div>

展示效果为：

假设中间的三个链接计划要做成跟标题颜色一样，参考前面的例子可以加一个color: inherit属性：

<style>
  .welcome {
    color: #888;
  }
  .welcome a {
    color: inherit;
  }
  .more {
    margin-top: 2rem;
    font-size: 0.8rem;
  }
</style>
<div class="welcome">
  <h1>您好，欢迎来到...</h1>
  <div><a href="/chapter1">查看第一章</a></div>
  <div><a href="/chapter2">查看第二章</a></div>
  <div><a href="/chapter3">查看第三章</a></div>

  <div class="more">
    <a href="/more.html">查看更多</a>
  </div>
</div>

有可能按照需求文档，最底下的链接查看更多需要使用默认的蓝色。也许会有一些开发者想到加个color: rgb(0, 0, 255)属性，但实际上浏览器默认的蓝色链接产不是rgb(0, 0, 255)，而是rgb(0, 0, 238)。应该有很多开发者也不想去记这个蓝色色号，这种情况下，就可以使用revert关键词将color设置为浏览器的默认值：

<style>
  .welcome {
    color: #888;
  }
  .welcome a {
    color: inherit;
  }
  .more {
    margin-top: 2rem;
    font-size: 0.8rem;
  }
  .more a {
    color: revert;
  }
</style>
<div class="welcome">
  <h1>您好，欢迎来到...</h1>
  <div><a href="/chapter1">查看第一章</a></div>
  <div><a href="/chapter2">查看第二章</a></div>
  <div><a href="/chapter3">查看第三章</a></div>

  <div class="more">
    <a href="/more.html">查看更多</a>
  </div>
</div>

运行结果为：