了解CSS revert全局关键字

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

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

一、CSS全局关键字

inherit 、 initial 、 unset 和 revert 都是CSS全局关键字。

所谓“全局关键字”，指的是所有的CSS属性都可以使用这几个关键字作为属性值。

其中前3个关键字之前我已经介绍过了， 详见“ CSS inherit是继承，那initial和unset呢？ ”这篇文章。

而 revert 关键字当时兼容性不佳，只是一带而过。

现在是时候拿出来介绍了。

二、revert作用-还原

revert 关键字可以让当前元素的样式还原成浏览器内置的样式，注意，是还原到浏览器内置的默认样式，而不是CSS属性原本的初始值。

例如：

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

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

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

/* 请删除 */

li { padding: 0; margin: 0; list-style-type: none; }

我们来看一下实际的效果，如下图所示，截自Firefox浏览器。

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=9822（作者张鑫旭）

完整的测试代码如下：

<ol class="revert-ol">
    <li>inherit关键字实用</li>
    <li>initial关键字可用</li>
    <li>unset关键字配合all使用</li>
    <li>revert关键字有用</li>
</ol>

.revert-ol {
    list-style: none;
}
@supports (padding: revert) {
    .revert-ol {
        padding: revert;
        list-style-type: revert;
    }
}

对于不支持revert关键字的浏览器，则看不到前面的数字序号，如下图所示。

眼见为实，你可以狠狠地点击这里： CSS revert关键字与有序列表恢复demo

目前兼容性

revert关键字的兼容性现在已经挺好的了，Chrome、Firefox和Safari等现代浏览器均已支持，如下截图所示：

四、revert相对更实用一些

revert 关键字要比 initial 等关键字更实用，常常配合 all 属性一起使用。

例如希望一个按钮完全使用浏览器默认的UI，则可以这么设置：

button {
    all: revert;
}

类似 revert 这样的CSS特性，平常不怎么用到，一旦用到，立竿见影的效果非常的爽歪歪。

大家可以多加关注下。

好，以上就是本文内容，欢迎转发欢迎分享。

感谢您的阅读，情人节快乐！

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

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

（本篇完）