CSSでは、4つのキーワードは、理論的には(最初の)最初のある任意のCSSプロパティ、継承(継承)、解除(設定されていない)、元に戻す(復元)に適用することができますがあります。そして、これらの値の全ては、わずか4つの以上のキーワードことができます。この記事では、最初、継承、解除、元に戻すとすべてを説明します
初期
デフォルト値は、最初の要素のプロパティを(デフォルト値は公式仕様の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>
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
継承
これは、要素のプロパティの計算値に対応する直接の親要素を表し、
互換性: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>
解除
そして、当該初期設定解除を継承に関して、それが比較的複雑です。そうでない場合、値は初期;プロパティは、値の継承継承デフォルトである場合と述べました。実際には、未設定の設定の同等は設定されていません
互換性: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>
元に戻します
属性のデフォルト値は定義されたスタイルシートの要素を表します。この設定を押下明示的に定義されたスタイルシートセット、もし、そうでない場合、スタイルシートによれば、ブラウザのスタイルの設定を定義し、未設定とそうでない場合は同等
互換性:のみsafari9.1 +とios9.3 +サポート
すべて
CSSプロパティのunicode-双方向および方向以外のすべての属性値をリセット表し、値が唯一の初期で、継承、設定を解除して元に戻します
互換性: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>
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
すべてとして、[1]:時の初期、すべての属性はデフォルト値です.IN
border:none;padding:0;color:black;
[2]と、すべての:継承、すべての属性は、親要素の継承値.IN取得されたとき
border:1px solid black;padding:20px;color:red;
[3]と、すべての:未設定、すべてのプロパティがない値と同等であるが、デフォルト継承継承、非継承デフォルト値で設定されている.IN
border:none;padding:0;color:red;