小编典典

初始值和未设置值有什么区别?

css

一个简单的例子:

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?仅支持浏览器


阅读 540

收藏
2020-05-16

共1个答案

小编典典

根据您的链接

unset 是一个CSS值,如果继承了一个属性,则该属性与“继承”相同;如果不继承一个属性,则其属性为“初始”

这是一个例子:

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,但您更希望该值是继承的,而不是设置回浏览器的默认值,那么这种情况就很重要。

例如:

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>
2020-05-16