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
测试代码如下：
- #朱一龙追梦人# 1亿
- #宠爱票房# 3亿
- #张艺兴醉拳舞# 1亿
- #肖战余年MV# 2亿
- #张鑫旭中大鱼# 233
实时效果如下（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;
}
然后这个按钮的实时效果如下：
你以为你大功告成，突然产品经理来了个需求，希望我们的页面增加一个叫原始皮肤的皮肤，在这个皮肤下面，所有的表单控件都是用原生的样子。
如果只要一个按钮还好，JS去掉类名 ui-button ，但是现在是整个页面换肤，有那么多的按钮，而且还有按钮说不定是在JS里面创建的，所以去除类名这种方式显得很麻烦。
有没有什么简单的办法呢？啊，很简单，一行CSS就可以了，如下示意：
实时效果如下：
截图效果如下：
大家看到了没？这就是一个非常典型，非常具有代表性的，脑袋瓜想当然，然后翻车的现场！大家一定要引以为戒！
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 , 则使用初始值。
还是按钮的例子，如果我们这样改造呢？
实时效果如下（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
（本篇完）
About The Author
