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

Posted 2023-02-21

【中文标题】CSS中“初始”值的用途是啥？

【英文标题】：What is use of 'initial' value in CSS?CSS中“初始”值的用途是什么？

【发布时间】：2013-09-03 06:44:29

【问题描述】：

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

例子：

div.inline 
  display: inline;


div.initial 
  display: initial;

我预计div.inline 规则将在内联模式下显示<div class="inline">，而div.initial 规则将使用div 的原始显示值block 显示<div class="initial">。

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

【问题讨论】：

这里对初始值有一个很好的解释：***.com/q/35689456/3597276

【参考方案1】：

总结：initial 值最常见的用途是覆盖继承的样式。

当您在一个元素上使用inherited property 时，它的一些后代可能会受到不利影响。要从这些元素中清除不需要的样式，请使用 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 不能：

在non-inherited properties 上，属性的initial 值可能与浏览器的默认值出乎意料地不同。这意味着您需要在使用它之前知道它的initial 值。然而，计算的（最终）值可能与initial 值不同：

p 
  display: flex;


a 
  display: initial;

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

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

【参考方案2】：

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

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

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

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

【讨论】：

有一个非常常见的恼人用例，其中initial非常很有帮助：当您以编程方式隐藏和取消隐藏元素时，即给它display:none，然后再次显示它.这是因为display 的值太多，没有initial 就没有默认值。 jQuery 多年来一直这样做，而 LESS、Stylus 和 SCSS 之类的预处理器使它变得更容易，但它在 CSS 中是有帮助的。不过，没有它的 IE 确实会限制它，尤其是因为其他浏览器确实允许它存在。

它还使用了像我这样令人沮丧的开发人员，他们只是希望 2*initial 成为“默认值的两倍”。

@trysis，我也对你关于“initial 非常有用的一个非常常见的恼人用例”的评论感到困惑。听起来你是说当你用“display:none”隐藏一个元素然后想要再次显示它时可以使用“display:initial”，恢复它在隐藏它之前的任何“display”属性。那是行不通的。它只是给元素一个“内联”的“显示”属性，不管它是像 这样的块级元素还是像 这样的内联元素。如果你说的是不同的东西，你能澄清一下吗？

对不起，我很久以前写过那条评论，当时 Inwa 是一个全新的开发人员。我的意思是display: revert。不幸的是，revert 没有很好的支持，即使是现在。

【参考方案3】：

Source

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> 

【讨论】：

感谢您的回复。那么inherit和initial的区别是什么？

inherit 从父元素获取值。