Understand the keywords initial, inherit, unset, revert and all attributes in CSS

In CSS, there are 4 keywords that can theoretically be applied to any CSS property, they are initial (initial), inherit (inherited), unset (not set), revert (reduction). The value of all can only be the above four keywords. This article will introduce initial, inherit, unset, revert and all.

initial

Represents the initial default value of the element attribute (the default value is defined by the official CSS specification)

Compatibility: IE does not support

[Note] The initial default values ​​of each attribute are moved here

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

##inherit

means The calculated value of the corresponding attribute of the element's immediate parent element

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

unset is relatively more complicated than initial and inherit. Indicates that if the property is inheritable by default, the value is inherit; otherwise, the value is initial. In fact, setting unset is equivalent to not setting

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

【Commonly used default is available Inherited 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

represents the default value of the element attribute defined in the style sheet. If explicitly set in the user-defined style sheet, follow this setting; otherwise, follow the style setting in the browser-defined style sheet; otherwise, it is equivalent to unset

Compatibility: only safari9.1 and ios9. 3 Support

all

means to reset the attribute values ​​of all CSS attributes except unicode-bidi and direction. The values ​​can only be initial, inherit, and unset. Compatibility with revert

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

<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>

[1]When all:initial,. All attributes of in take the default value

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

[2]When all:inherit, all attributes of .in take the inherited value of the parent element

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

[3]When all:unset , all attributes of .in are equivalent to not setting a value, the default is inheritable inheritance, the non-inheritable ones keep the default value

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

This article is reproduced from: https://www.cnblogs.com/xiaohuochai/p/5464456.html

Recommended learning:

css quick start

The above is the detailed content of Understand the keywords initial, inherit, unset, revert and all attributes in CSS. For more information, please follow other related articles on the PHP Chinese website!