CSS style keyword initial, inherit, unset, revert and all

In CSS, there are four keywords can theoretically be applied to any CSS properties, which are initial (initial), inherit (inherited), unset (not set), revert (restore). And all of these values ​​can only be four or more keywords. This article describes the initial, inherit, unset, revert and all

initial

The default value indicates the initial element property (the default value is defined by the official specification CSS)

Compatibility: IE does not support

//display在官方CSS规范中定义的默认值是inline
<style>
.test{display: initial;}
</style>
<div class="box">
    <div class="test">测试一</div><span>文字</span>
    <br>
    <div >测试二</div><span>文字</span>
</div>

专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

inherit

It represents a direct parent element corresponding to the element property Calcd

Compatibility: IE7- not supported

<style>
.box{
    border: 1px solid black;
    padding: 10px;
    width: 100px;
}
.test{
    border: inherit;
    height: 30px;
}
</style>
<div class="box">
    <div class="test">测试一</div>
</div>
<div class="box">
    <div class="in">
        <div class="test">测试二</div>        
    </div>
</div>

unset

and with respect to the initial unset inherit concerned, it is relatively complex. Said that if the property is inheritable default, the value inherit; otherwise, the value initial. In fact, the equivalent of setting unset not set

Compatibility: IE does not support, safari9- not supported, ios9.2- not supported, android4.4.4- not support

[Common inheritable default style]

color
cursor
direction
font
letter-spacing
line-height
list-style
text-align
text-indent
text-shadow
text-transform
white-space
word-break
word-spacing
word-wrap
writing-mode

//内容为测试一的元素和内容为测试二的元素的样式是一样的
<style>
.box{
    border: 1px solid black;
    padding: 10px;
    width: 100px;
    color: red;
}
.test1{
    border: unset;
    color: unset;
}
</style>
<div class="box">
    <div class="test">测试一</div>
    <div>测试二</div>
</div>

revert

The default value of the attribute represents a stylesheet element defined. If the user explicitly defined style sheet set, pressing this setting; otherwise, according to the style sheet defines browser style settings; otherwise equivalent to unset

Compatibility: Only safari9.1 + and ios9.3 + support

all

Represents reset all attribute values ​​other than the CSS property unicode-bidi and direction, the value is only initial, inherit, unset and revert

Compatibility: IE does not support, safari9- not supported, ios9.2- not supported, android4.4- not support

<style>
.test{
    border: 1px solid black;
    padding: 20px;
    color: red;
}
.in{
/*  all: initial;
    all: inherit;
    all: unset;
    all: revert; */
}
</style>
<div class="test">
    <div class="in">测试文字</div>            
</div>

专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

[1] As all: when the initial, all attributes are default values ​​.in

border:none;padding:0;color:black;

[2] When all: when inherit, all attributes are taken .in parent element inherits values

border:1px solid black;padding:20px;color:red;

[3] When all: when unset, .in all properties are equivalent to no value is set by default inherit inheritable, non-inherited default values

border:none;padding:0;color:red;