了解CSS全局关键字

inherit、initial、unset和revert是CSS全局关键字属性值，也就是说所有CSS属性都可以使用这几个关键字作为属性值。

inherit，用过都说好

inherit这个关键字是继承的意思。IE浏览器从IE8（标准版）开始支持该关键字。

inherit是一个实用性和兼容性俱佳的CSS属性值。例如，常在表单标签中重置输入框的内置字体：

input,textarea {
  font-family: inherit;
}

又如，子元素设置height: inherit实现高度继承，或者子元素设置background-image: inherit实现背景图像继承等，这些都是非常实用的场景。

大家一定要养成使用inherit关键字的好习惯，这可以有效地降低开发和维护成本。

initial，初始关键字

initial是初始关键字，可以把当前的CSS属性的计算值还原成CSS语法中规定的初始值。

例如，下面这段HTML表示的是一个热门话题列表：

<ul class="initial-ul">
  <li>#追梦人#<small>1777万</small></li>
  <li>#热辣滚烫#<small>877万</small></li>
  <li>#飞驰人生2#<small>677万</small></li>
  <li>#庆余年2#<small>477万</small></li>
</ul>

然后，我们给最后一行列表设置font-size: initial，代码如下：

.initial-ul {
  font-size: 12px;
}
.initial-ul li:last-child {
  font-size: initial;
}

结果如下如所示：

从上图中可以看到最后一行“#庆余年2#”这几个文字的字号明显比上面几行文字的字号大了一些。这是因为最后一个<li>列表项设置了font-size: initial，这就意味着最后一个<li>列表项的字号大小使用的是CSS规范中定义的初始值，这个初始值就是medium关键字。如果用户没有修改过浏览器中的默认字号设置，则medium关键字的计算值是16px。

initial关键字适合用在需要重置某些CSS样式，但又不记得初始值的场景。initial关键字还可以帮助大家了解CSS属性的初始值。

例如，display属性的初始值是什么MDN文档就没有明说，那么，大家可以设置display: initial看下效果。

p {
  display: initial;
}

结果<p>元素垂直方向的margin和text-indent属性都失效了，这些失效现象是典型的内联元素特性，因此，display属性的初始值是inline。

可能的误区

很多人有这样一个误区：把initial关键字理解为浏览器设置的元素的初始值。实际上两者是不一样的。

举个例子，实际开发时，<ul>元素或者<ol>元素默认的list-style-type样式会被CSS重置。但是可能会遇到需要使用默认的list-style-type样式（小圆点或者数字），此时有些开发者就会使用initial关键字对该样式进行还原：

ol {
  padding: initial;
  list-style-type: initial;
}

但是没有用！因为上面的CSS设置等同于下面的设置：

ol {
  padding: 0;
  list-style-type: disc;
}

而不是设想的：

ol {
  padding: 0 0 0 40px;
  list-style-type: decimal;
}

此时需要的全局关键字属性值其实是revert，而不是initial。

兼容性

除IE浏览器之外，其他浏览器都很早就支持了initial，因此，至少在移动端项目（包括微信小程序）中大家可以百分百放心使用这个关键字属性值。

unset，不固定值关键字

unset是不固定关键字，其特性如下：如果当前使用的CSS属性是具有继承特性的，如color属性，则等同于使用使用inherit关键字；如果当前使用的CSS属性是没有继承特性的，如background-color，则等同于使用initial关键字。

unset这个关键字只有配合all属性使用才有意义，因为对于某个具体的CSS属性，想要继承某个属性，那就使用inherit关键字；想要使用初始值，那就使用initial关键字，没有任何理由使用unset关键字。

举个例子，Chrome浏览器支持HTML5.1规范中的<dialog>元素，我们自然会想到借助这个<dialog>元素实现语义更好的弹框组件。然而有一个小问题，这个<dialog>元素内置了很多我们不需要的样式，内容如下：

dialog {
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  width: -webkit-fit-content;
  height: -webkit-fit-content;
  color: black;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 1em;
  background: white;
}

可以看到<dialog>元素默认有黑色边框和padding内间距，还有纯白色的背景颜色和纯黑色的文字颜色，因此下面这段HTML就会有下图所示效果。

<dialog open>这是一个H5弹框</dialog>

这个粗糙的效果显然不是我们想要的，但是一个属性接一个属性地进行重置，显然很繁琐。此时就可以先使用all:unset进行批量重置，再设置我们需要的CSS属性：

dialog {
  all: unset;
  /* 下面可自定义样式 */
}

这样，无论当前浏览器是否支持<dialog>元素，最终渲染出来的样式效果都是一致的。因为不支持<dialog>元素的浏览器会把<dialog>元素按照<span>这个内联元素渲染，这样和设置了all:unset的效果一模一样。

revert，恢复关键字

revert关键字可以让当前元素的样式还原成浏览器内置的样式。例如：

ol {
  padding: revert;
  list-style-type: revert;
}

那么<ol>中的每一个<li>项都会有数字效果呈现，当然，前提是你没有对子元素<li>的list-style-type属性做过样式重置。

这里有必要插一句，请记住：没有任何理由对<li>元素进行任何样式重置。因为所有浏览器的<li>元素默认都没有margin外间距，也没有padding内间距，list-style-type也是继承<ul>或者<ol>元素，所以对<li>元素进行任何样式重置，既浪费CSS代码，也不利于列表序号的样式设置。此刻，你就可以看看手中的项目中的代码有没有对<li>元素做过样式重置，如果有，赶快删掉：

/*请删除*/
li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}