Differences between initial, inherit, unset, revert and all

initial

Represents the initial default value of the element attribute ( The default value is determined by the official CSS Specification definition )

Example

<p>
  <span>This text is red.</span>
  <em>This text is in the initial color (typically black).</em>
  <span>This is red again.</span>
</p>

p {
    
  color: red;
}

em {
    
  color: initial;
}

inherit

Represents the calculated value of the attribute corresponding to the direct parent element of the element ,inherit Keywords only enhance the default behavior of attributes , Usually, it is only used when overwriting the original value . Inheritance always comes from the parent element in the document tree , Even if the parent element does not contain a block .

/*  Set the color of the secondary title to green  */
h2 {
     color: green; }

/* ...but leave those in the sidebar alone so they use their parent's color */
#sidebar h2 {
     color: inherit; }

unset

unset be relative to initial and inherit for , It's a little more complicated . Indicates that if this attribute is inheritable by default , Then the value is inherit; Otherwise, it's worth initial. actually , Set up unset Equivalent to not setting

<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>

.foo {
    
  color: blue;
}
.bar {
    
  color: green;
}

p {
    
  color: red;
}
.bar p {
    
  color: unset;
}

revert

Represents the default value of the element attribute defined in the style sheet . If the user defines the explicit setting in the style sheet , Then press this setting ; otherwise , Define the style settings in the style sheet according to the browser ; otherwise , Equivalent to unset

<h3 style="font-weight: revert; color: revert;">
  This should have its original font-weight (bold) and color: black
</h3>
<p>Just some text</p>
<h3 style="font-weight: unset; color: unset;">
  This will still have font-weight: normal, but color: black
</h3>
<p>Just some text</p>

h3 {
    
  font-weight: normal;
  color: blue;
}

all

Indicates reset Division unicode-bidi and direction All but CSS Property value of property , The value can only be initial、inherit、unset and revert

<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"> Test text </div>            
</div>