Verstehen Sie die Schlüsselwörter initial, inherit, unset, revert und alle Attribute in CSS

In CSS gibt es 4 Schlüsselwörter, die theoretisch auf jede CSS-Eigenschaft angewendet werden können: initial (initial), inherit (inherited), unset (nicht gesetzt), revert (reduction). ). Der Wert von all kann nur die oben genannten vier Schlüsselwörter sein. In diesem Artikel werden Initial, Inherit, Unset, Revert und alles vorgestellt.

initial

stellt den anfänglichen Standardwert des Elementattributs dar (der Standardwert wird durch die offizielle CSS-Spezifikation definiert)

Kompatibilität: IE tut dies nicht unterstützt

[Hinweis] Die anfänglichen Standardwerte jedes Attributs werden hierher verschoben

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

erben

bedeutet Der berechnete Wert des entsprechenden Attributs des direkten übergeordneten Elements des Elements

Kompatibilität: IE7 – nicht unterstützt

<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 ist relativ komplizierter als initial und inherit. Gibt an, dass der Wert standardmäßig vererbbar ist, andernfalls ist der Wert initial. Tatsächlich ist das Festlegen von „unset“ gleichbedeutend mit dem Nichtfestlegen von

Kompatibilität: IE unterstützt es nicht, Safari9 – unterstützt es nicht, ios9.2 – unterstützt es nicht, Android4.4.4 – unterstützt es nicht

【Der häufig verwendete Standard ist OK. Vererbte Stile]

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

rrree

revert

stellt den Standardwert von dar das im Stylesheet definierte Elementattribut. Wenn dies explizit im benutzerdefinierten Stylesheet festgelegt ist, befolgen Sie andernfalls die Stileinstellung im browserdefinierten Stylesheet. Andernfalls entspricht dies der Nichteinstellung

Kompatibilität: nur Safari9.1+ und ios9 .3+ unterstützt

all

bedeutet, dass die Attributwerte aller CSS-Attribute außer Unicode-Bidi und Direction zurückgesetzt werden können initial und erben. , nicht gesetzt und zurückgesetzt

Kompatibilität: IE nicht unterstützt, Safari9-nicht unterstützt, ios9.2-nicht unterstützt, Android4.4-nicht unterstützt

//内容为测试一的元素和内容为测试二的元素的样式是一样的
<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>

【1】Wenn alle : initial, alle Attribute von .in nehmen den Standardwert an

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

【2】Wenn all:inherit, nehmen alle Attribute von .in den geerbten Wert des übergeordneten Elements an

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

【3】 Wenn alle: Wenn sie nicht festgelegt sind, entsprechen alle Eigenschaften von .in dem Nichtfestlegen eines Werts. Die Standardvererbung wird vererbt und die nicht vererbbaren behalten den Standardwert

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

Dieser Artikel Nachdruck von: https://www.cnblogs.com/xiaohuochai/p/5464456.html

Empfohlenes Lernen: CSS Quick Start

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Schlüsselwörter initial, inherit, unset, revert und alle Attribute in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!