CSS 初始值和未设置值之间有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33834049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between the initial and unset values?
提问by zloctb
A simple example:
一个简单的例子：
HTML
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
CSS
em {
color:initial;
color:unset;
}
What is the difference between initialand unset? Only supports browsers
initial和 和有unset什么区别？仅支持浏览器
回答by Josh Crozier
According to your link:
根据您的链接：
unsetis a CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited
unset是一个 CSS 值，如果属性被继承，则与“inherit”相同；如果属性未被继承，则与“initial”相同
Here is an example:
下面是一个例子：
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>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.
差异很重要的一种情况是，如果您尝试覆盖样式表中的某些 CSS，但您希望该值是继承的，而不是设置回浏览器默认值。
For instance:
例如：
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>回答by AGE
I would like to quote the official CSS|MDN documentation for future reference when looking into the differences between each:
在查看每个文件之间的差异时，我想引用官方的 CSS|MDN 文档以供将来参考：
The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property.
initial CSS 关键字将属性的初始值应用于元素。它被允许用于每个 CSS 属性，并导致为其指定的元素使用该属性的初始值。
Therefore according to your example:
因此，根据您的示例：
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>Note how the initialproperty retains the initialthe colorproperty of the element.
注意如何初始属性保留了最初的color元素的属性。
The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case.
unset CSS 关键字是initial 和inherit 关键字的组合。像这两个 CSS 范围内的其他关键字一样，它可以应用于任何 CSS 属性，包括所有的 CSS 速记。如果属性从其父级继承，则此关键字将属性重置为其继承的值，否则重置为其初始值。换句话说，它的行为类似于第一种情况下的 inherit 关键字，第二种情况下的行为类似于 initial 关键字。
Therefore according to your example:
因此，根据您的示例：
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>Note how the unsetproperty simply resetsthe colorproperty of the element.
请注意unset属性如何简单地重置color元素的属性。
IN CONCLUSION
综上所述
The idea is quite straight forward, but in practice I would advice caution when dealing with cross browser compatibility for both CSS properties... that is as of today.
这个想法很简单，但在实践中，我建议在处理这两个 CSS 属性的跨浏览器兼容性时要谨慎……截至今天。
