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

Question

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

例:

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值(未属性)表示属性的初始值,如在CSS规范定义:"在'初始’关键字表示被指定为属性的初始值的指定值".因此,它的含义取决于属性,但不在其他任何东西上,例如,不在浏览器上或属性所应用的元素上.所以它并不能意味着浏览器的默认.

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

因此,该initial值的有用性有限.由于误解,其主要影响似乎是让人迷惑.一个可能的用例是color属性,因为它的初始值取决于浏览器(大多数是黑色,我们知道,但不一定).对于它,initial意味着浏览器默认,因为这是属性的定义方式,类似的用例是font-family:通过声明font-family: initial,您获得浏览器的默认字体(可能取决于浏览器设置).

由于缺乏对IE(甚至是IE 10)的支持,其实用性进一步受到限制.

Answer 2

资源

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