了解css中的關鍵字initial、inherit、unset、revert和all屬性

在CSS中，有4個關鍵字理論上可以套用於任何的CSS屬性，它們是initial(初始)、inherit(繼承)、unset(未設定)、revert (還原)。而all的取值只能是以上這4個關鍵字。本文將介紹initial、inherit、unset、revert和all。

initial

表示元素屬性的初始預設值(此預設值由官方CSS規格定義)

相容性: IE不支援

[注意]關於各屬性的初始預設值移步至此

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

#inherit

##表示元素的直接父元素對應屬性的計算值

相容性: IE7-不支援

<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相對於initial和inherit而言，相對複雜一點。表示如果該屬性預設可繼承，則值為inherit；否則值為initial。實際上，設定unset相當於不設定

相容性: IE不支持，safari9-不支持，ios9.2-不支持，android4.4.4-不支援

【常用預設可繼承樣式】

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

表示樣式表中定義的元素屬性的預設值。若使用者定義樣式表中明確設置，則按此設定；否則，依照瀏覽器定義樣式表中的樣式設定；否則，等價於unset 

相容性: 只有safari9.1 和ios9. 3 支援

all

表示重設除unicode-bidi和direction以外的所有CSS屬性的屬性值，取值只能是initial、inherit、unset和revert

相容性: IE不支持，safari9-不支持，ios9.2-不支持，android4.4-不支持

<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】當all:initial時，. in的所有屬性都取預設值

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

【2】當all:inherit時，.in的所有屬性都取父元素繼承值

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

【3】當all:unset時，.in的所有屬性都相當於不設定值，預設可繼承的繼承，不可繼承的保持預設值

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

本文轉自： https://www.cnblogs.com/xiaohuochai/p/5464456.html

#推薦學習：

css快速入門

以上是了解css中的關鍵字initial、inherit、unset、revert和all屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！