Question

我认为initial值会恢复最初呈现的样式（由browser的内部user-agent样式表应用）。

示例：

div.inline {
  display: inline;
}

div.initial {
  display: initial;
}

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

但是当我探索这个时，<div class="initial">会显示内联。我错了吗？任何人都可以详细说明这个吗？

Answer 1

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

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

因此，initial值的用途有限。由于误解，其主要影响似乎是让人迷惑。可能的用例是color属性，因为它的初始值取决于浏览器（大多数是黑色，我们知道，但不一定）。对于它，initial表示浏览器默认，因为这是属性的定义方式，font-family的类似用例：通过声明font-family: initial，您获得浏览器的默认字体（可能取决于在浏览器设置上。）

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

Answer 2

Source

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

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

2 个答案: