初始值和未设置值之间有什么区别？

Question

一个简单的例子：

<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有什么区别？只支持浏览器

CanIUse: CSS未设置值

开发人员Mozilla Web CSS初始

Answer 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>

​

Answer 2

我想引用正式的CSS\MDN文档，以便在研究每个文档之间的差异时参考：

初值

初始CSS关键字将属性的初始值应用于元素。它在每个CSS属性上都是允许的，并导致指定它的元素使用该属性的初始值。

因此，根据你的例子：

​

em {
    color:initial;
    /* color:unset; */
}

<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>

​

注意初始属性如何保留元素的初始color属性。

未定

unset CSS关键字是初始关键字和继承关键字的组合。与这两个CSS范围内的关键字一样，它可以应用于任何CSS属性，包括CSS速记all。如果属性继承自其父属性，则此关键字将将属性重置为继承的值；如果不是，则将属性重置为初始值。换句话说，在第一种情况下，它的行为类似于继承关键字，在第二种情况下，它的行为类似于初始关键字。

因此，根据你的例子：

​

em {
  /* color:initial; */
  color:unset;
}

<p style="color:red!important"> 
  this text is red 
  <em> 
    this text's color has been unset (e.g. red)
  </em>
  this is red again
</p>

​

注意unset属性如何简单地重置元素的color属性。

结论中的

这个想法非常直截了当，但在实践中，我建议在处理两个CSS属性的跨浏览器兼容性时要谨慎.这是从今天开始。

Answer 3

CSS显示属性: unset=inherit