Comprendre les mots-clés initial, hériter, unset, revert et tous les attributs en CSS

En CSS, il existe 4 mots-clés qui peuvent théoriquement s'appliquer à n'importe quelle propriété CSS, ils sont initial (initial), Heherit (hérité), unset (non défini), revert (réduction ). La valeur de tout ne peut être que les quatre mots-clés ci-dessus. Cet article présentera initial, hériter, supprimer, revenir et tout.

initial

représente la valeur initiale par défaut de l'attribut de l'élément (la valeur par défaut est définie par la spécification CSS officielle)

Compatibilité : IE le fait ne prend pas en charge

[Note] Les valeurs par défaut initiales de chaque attribut sont déplacées ici

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

hériter

signifie La valeur calculée de l'attribut correspondant de l'élément parent direct de l'élément

Compatibilité : IE7-non pris en charge

<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 est relativement plus compliqué qu'initial etherit. Indique que si la propriété est héritable par défaut, la valeur est héritée ; sinon, la valeur est initiale ; En fait, définir unset équivaut à ne pas définir

Compatibilité : IE ne le prend pas en charge, safari9- ne le prend pas en charge, ios9.2- ne le prend pas en charge, android4.4.4- ne le prend pas en charge

【La valeur par défaut couramment utilisée est OK Styles hérités]

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

revert

représente la valeur par défaut de l'attribut d'élément défini dans la feuille de style. S'il est explicitement défini dans la feuille de style définie par l'utilisateur, suivez ce paramètre ; sinon, suivez le paramètre de style dans la feuille de style définie par le navigateur, sinon cela équivaut à unset

Compatibilité : uniquement safari9.1+ et ios9 .3+ prend en charge

tous

moyens de réinitialiser les valeurs d'attribut de tous les attributs CSS à l'exception d'unicode-bidi et de direction. Les valeurs ne peuvent être. initial et hériter. , annuler et revenir

Compatibilité : IE non pris en charge, safari9-non pris en charge, ios9.2-non pris en charge, android4.4-non pris en charge

//内容为测试一的元素和内容为测试二的元素的样式是一样的
<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】Quand tout : initial , tous les attributs de .in prennent la valeur par défaut

<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】Quand all:inherit, tous les attributs de .in prennent la valeur héritée de l'élément parent

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

【3】 Quand tout : Lorsqu'elles ne sont pas définies, toutes les propriétés de .in équivalent à ne pas définir de valeur. L'héritage par défaut est hérité et les propriétés non héritables conservent la valeur par défaut

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

Cet article Réimprimé de : https://www.cnblogs.com/xiaohuochai/p/5464456.html

Démarrage rapide CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!