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

Question

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

例子：

div.inline {
  display: inline;
}

div.initial {
  display: initial;
}

我预计该div.inline规则将<div class="inline">以内联模式显示，并且该div.initial规则将<div class="initial">使用 adiv的原始显示值显示block。

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

score 57 · Accepted Answer

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

例如，对于display属性，initial 总是意味着inline，因为这是属性的指定初始值。在示例情况下，浏览器默认是block，因为元素是div.

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

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

score 7 · Accepted Answer

资源

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

score 0 · Accepted Answer

摘要：该initial值最常见的用途是覆盖继承的样式。

当您在元素上使用继承属性时，它的某些后代可能会受到不利影响。要从这些元素中清除不需要的样式，请使用该initial值。

p {
  visibility: hidden;
}

em {
  visibility: initial;
}

<p>
  <span>This text is hidden.</span>
  <em>I don't want this text to be hidden.</em>
  <span>This text is hidden.</span>
</p>

visibility那么 OP 中讨论的和display属性有什么区别？该visibility属性可以被继承，但display不能：

在非继承属性上，属性的initial值可能与浏览器的默认值不同。这意味着您需要initial在使用它之前知道它的价值。然而，计算的（最终）值可能与initial值不同：

p {
  display: flex;
}

a {
  display: initial;
}

<p>
  <a href="#">Link</a>
</p>

这就是为什么我个人不喜欢initial在非继承属性上使用该值。

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

3 回答 3

Related

Reference