CSS中“初始”值的用途是什么？

Question

我认为 initial 值将恢复最初呈现的样式（由浏览器的内部用户代理样式表应用）。

例子：

 div.inline {
  display: inline;
}

div.initial {
  display: initial;
}

I expected the div.inline rule would display <div class="inline"> in inline mode, and the div.initial rule would display <div class="initial"> using a div 的原始显示值 block 。

但是当我探索这个时， <div class="initial"> 显示内联。我错了吗？谁能详细说明一下？

原文由 NkS 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

initial 值（不是属性）表示属性的初始值，如 CSS 规范中所定义：“‘initial’关键字表示指定为属性初始值的指定值。”因此，它的含义取决于属性，而不是其他任何东西，例如，不取决于浏览器或应用该属性的元素。所以这 并不 意味着浏览器默认。

例如，对于 display 属性， initial 始终 表示 inline ，因为这是属性的指定初始值。在示例中， 浏览器默认 为 block ，因为元素为 div 。

因此， initial 值的用处有限。由于误解，它的主要作用似乎是混淆人们。一个可能的用例是 color 属性，因为它的初始值是依赖于浏览器的（大部分是黑色，正如我们所知，但不一定）。对于它， initial 意味着浏览器默认，因为这就是属性的定义方式，类似的用例是 font-family ：通过声明 font-family: initial 默认字体（可能取决于浏览器设置）。

由于缺乏对 IE（甚至 IE 10）的支持，实用性进一步受到限制。

原文由 Jukka K. Korpela 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

资源

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

 /* give headers a green border */
 h2 { border: medium solid green }

 /* but make those in the sidebar use the value of the "color" property */
 #sidebar h2 { border-color: initial; }
<p style="color:red">
    this text is red
       <em style="color:initial">
          this text is in the initial color (e.g. black)
       </em>
    this is red again
 </p>

原文由 John Conde 发布，翻译遵循 CC BY-SA 3.0 许可协议