关于html：CSS中’initial’值的用法是什么？

browsercsshtml

What is use of 'initial' value in CSS?

我认为initial值将还原最初呈现的样式(由浏览器的内部用户代理样式表应用)。

例：

1
2
3
4
5
6
7

div.inline {
display: inline;
}

div.initial {
display: initial;
}

我希望div.inline规则在串联模式下显示，而div.initial规则将使用div的原始显示值block显示。

但是，当我探索这一点时，会内联显示。我错了吗？谁能详细说明一下？

相关讨论

initial值(非属性)表示属性的初始值，如CSS规范中所定义："'initial'关键字表示指定为属性初始值的指定值。"因此，其含义取决于属性，而不取决于其他任何内容，例如不在浏览器上或在应用该属性的元素上。因此，这并不意味着浏览器默认。

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

因此，initial值的用途有限。由于误解，它的主要作用似乎是使人们感到困惑。一个可能的用例是color属性，因为它的初始值取决于浏览器(众所周知，大多数情况下为黑色，但不一定)。为此，initial表示浏览器默认设置，因为这是定义属性的方式。font-family的用法类似：通过声明font-family: initial，您将获得浏览器的默认字体(这可能取决于浏览器设置)。

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

相关讨论

资源

The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property.

1
2
3
4
5
6
7
8
9
10
11
12
13

/* 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

this text is in the initial color (e.g. black)

this is red again

</p>

相关讨论