CSS inherit是继承，那initial和unset呢？

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=5474

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

所有CSS都支持几个全局属性值，分别是： inherit , initial 和 unset 。

其中 inherit 是继承的意思，IE8（标准版）开始支持，不是从IE9开始支持的，网上一些文档是错误的。 inherit 是非常好用的一个CSS属性。

例如：

input, textarea {
    font-family: inherit;
}

或者子元素 height:inherit 或者背景 background 继承等，都是非常实用的场景。

那 initial 和 unset 这两个关键字值是什么意思呢？很多前端开发人员就不知道了。

一、初始值initial

initial 表示初始值的意思。

举几个例子看看其细节表现。

案例1：font-size与initial

测试代码如下：

<ul style="font-size:12px;border:1px solid deepskyblue;">
    <li>#朱一龙追梦人#   <small class="ml20">1亿</small></li>
    <li>#宠爱票房#   <small class="ml20">3亿</small></li>
    <li>#张艺兴醉拳舞# <small class="ml20">1亿</small></li>
    <li>#肖战余年MV# <small class="ml20">2亿</small></li>
    <li style="font-size:initial">#张鑫旭中大鱼# <small class="ml20">233</small></li>
</ul>

实时效果如下（Edge 12+，Chrome，Firefox等浏览器有效果）：

• #朱一龙追梦人# 1亿
• #宠爱票房# 3亿
• #张艺兴醉拳舞# 1亿
• #肖战余年MV# 2亿
• #张鑫旭中大鱼# 233

截屏效果如下，可以看到“张鑫旭中大鱼”这个热搜文字明显大了一圈，因为使用了 font-size 的初始值，就是…………《CSS世界》中有专门强调过，看看是不是你心里面想的那个值，那就是 medium ，如果已经完全没有印象了，《CSS世界》还需要再好好看一遍哦。

案例2：漂亮的button一秒变丑

有个美美的按钮，写了很多CSS：

.ui-button {
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
    text-align: center;
    color: #4c5161;
    border-radius: 4px;
    padding: 10px 15px;
    min-width: 80px;
    border: none;
    background-color: #2a80eb;
    color: #fff;
    box-sizing: border-box;
    font-family: inherit;
    cursor: pointer;
    overflow: visible;
}

<button class="ui-button">美美的按钮</button>

然后这个按钮的实时效果如下：

你以为你大功告成，突然产品经理来了个需求，希望我们的页面增加一个叫原始皮肤的皮肤，在这个皮肤下面，所有的表单控件都是用原生的样子。

如果只要一个按钮还好，JS去掉类名 ui-button ，但是现在是整个页面换肤，有那么多的按钮，而且还有按钮说不定是在JS里面创建的，所以去除类名这种方式显得很麻烦。

有没有什么简单的办法呢？啊，很简单，一行CSS就可以了，如下示意：

<button class="ui-button" style="all: initial">美美的按钮</button>

实时效果如下：

截图效果如下：

大家看到了没？这就是一个非常典型，非常具有代表性的，脑袋瓜想当然，然后翻车的现场！大家一定要引以为戒！

all:initial 并不能把按钮还原成浏览器原始按钮UI。因为浏览器默认按钮CSS也是额外设置的，因此， all:initial 会把浏览器内置按钮的CSS也全部变成初始值了，什么 border 边框啊，什么 background 背景全部都没了，结果最后就是一个纯文本一样的按钮。

所以，漂亮的按钮一秒变丑，1秒是不可能的了，不过也不是没有办法，可以借助 :not() 伪类。

body:not('.initial') .ui-button {
    /* 美美的按钮相关CSS */
}

二、不固定值unset

unset表示不固定值，特性如下，当前元素浏览器或用户设置的CSS忽略，然后如果是具有继承特性的CSS，如 color , 则使用继承值；如果是没有继承特性的CSS属性，如 background-color , 则使用初始值。

还是按钮的例子，如果我们这样改造呢？

<button class="ui-button" style="all: unset">美美的按钮</button>

实时效果如下（Edge 13+，Chrome，Firefox等浏览器有效果）：

截图对比效果如下：

虽然看似一样，实际上还是有不同之处的，例如color文字颜色，前者纯黑，后者淡一些；又例如按钮的高度，由于line-height具有继承性，所以后面的按钮继承了当前文章所在的行高，而不是 normal 初始值。

本想再举几个酷酷的例子，但是我想破脑袋都想不出有什么非常屌的应用场景，算了算了，就这样吧，等我哪天遇到哪个特殊的场景用到它再补充吧。

三、简单提一提revert

revert 也是一个全局值，表示恢复，可以重置CSS属性为浏览器默认的样式，正好可以完美解决上面按钮1秒变丑的需求。

兼容性如下，Firefox和Safari浏览器支持，Edge和Chrome暂时不支持：

如果用在 all 属性中，则目前只有Safari浏览器支持，因此，实际项目中还用不起来：

四、结束语

initial君，unset桑，本来想专门写篇文章好好夸夸你们，但是你们实在是不争气啊，给你们机会，你们也不中用啊。

兼容性又不好，比方说unset桑：

unset兼容性

initial君还好一点，移动端可以放心使用，很早就支持了，虽然IE还是场梦。

initial兼容性

同时也不实用，唉，没办法，我决定了，你们在《CSS新世界》这本书中活不过一页纸了。

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=5474

（本篇完）