初始值和未设置的值有什么区别? [英] What is the difference between the initial and unset values?

问题描述

一个简单的例子:

HTML

<p style="color:red!important"> 
    this text is red 
    <em> 
       this text is in the initial color (e.g. black)
    </em>
    this is red again
</p>

CSS

em {
    color:initial;
    color:unset;
}

initial和unset有什么区别?仅支持浏览器

What is the difference between initial and unset? Only supports browsers

CanIUse:CSS未设置值

Developer Mozilla Web CSS初始

推荐答案

根据您的链接:

unset是CSS值，如果继承了属性，则与继承"相同；如果不继承属性，则与初始"相同.

unset is a CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited

这里是一个例子:

pre {
  color: #f00;
}
.initial {
  color: initial;
}
.unset {
  color: unset;
}

<pre>
  <span>This text is red because it is inherited.</span>
  <span class="initial">[color: initial]: This text is the initial color (black, the browser default).</span>
  <span class="unset">[color: unset]: This text is red because it is unset (which means that it is the same as inherited).</span>
</pre>

如果您想覆盖样式表中的某些CSS，但问题更重要的是这种情况，但您希望该值是继承的，而不是设置回浏览器的默认值.

A scenario where the difference matter is if you are trying to override some CSS in your stylesheet, but you would prefer the value is inherited rather than set back to the browser default.

例如:

pre {
  color: #00f;
}
span {
  color: #f00;
}
.unset {
  color: unset;
}
.initial {
  color: initial;
}

<pre>
  <em>Text in this 'pre' element is blue.</em>
  <span>The span elements are red, but we want to override this.</span>
  <span class="unset">[color: unset]: This span's color is unset (blue, because it is inherited from the pre).</span>
  <span class="initial">[color: initial]: This span's color is initial (black, the browser default).</span>
</pre>

这篇关于初始值和未设置的值有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！