initialinheritunsetrevert和all的区别

Posted 2022-06-06 师兄白泽

initial

表示元素属性的初始默认值(该默认值由官方CSS规范定义)

示例

<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

表示元素的直接父元素对应属性的计算值,inherit 关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用。继承始终来自文档树中的父元素，即使父元素不是包含块。

/* 设置二级标题的颜色为绿色 */
h2  color: green; 

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

unset

unset相对于initial和inherit而言，相对复杂一点。表示如果该属性默认可继承，则值为inherit；否则值为initial。实际上，设置unset相当于不设置

<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

表示样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按此设置；否则，按照浏览器定义样式表中的样式设置；否则，等价于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

表示重设除unicode-bidi和direction之外的所有CSS属性的属性值，取值只能是initial、inherit、unset和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">测试文字</div>            
</div>