了解初始值如何与继承和非继承属性一起使用

Question

我目前正在学习如何在CSS中使用initial值。

但是，我对MDN中给出的继承属性和非继承属性的定义感到非常困惑。

那么initial对继承和非继承属性的影响究竟是什么？他们之间有什么区别？

Answer 1

初始值

属性的初始值是在W3C规范定义中分配给属性的值。

例如：

如果作者或浏览器没有定义此属性，则CSS将引用初始值。

继承属性

  

对于继承的属性，当没有为元素指定值时，仅对根元素使用初始值。

某些CSS属性可以继承它们的值。别人不能。此行为也在属性定义中建立（请参阅上图中的继承）。

如果属性可以继承，则意味着属性将 - 在未指定值的情况下 - 从父级获取该属性的计算值。

由于可以继承的属性在未指定时始终向父级查找值，因此除了 根元素 。

文档中任何位置的可继承属性，无论嵌套多深，都会一直向上查找一个值，直到达到根元素。这就是为什么初始值只需要存在于根元素上的原因。

非继承属性

  

对于非继承属性，当没有为元素指定值时，对任何元素使用初始值。

不会继承的属性不会向其父级寻求指导。因此，初始值在未指定的情况下应用于所有情况。

Answer 2

我会尝试用我的普通英语来清除这个小文件：

  

对于继承的属性，当没有为元素指定值时，仅对根元素使用初始值。

在我理解这一点的方式中，对于应用于HTML的任何规则，initial是HTML的默认值，并且将由子项继承，除非在HTML树的任何级别重置。

每个浏览器使用几乎相同的默认样式表（html背景是透明的（浏览器窗口中的白色），颜色是黑色，h1是具有垂直边距的块等等...）

如果您将color:green设置为HTML并将color:initial设置为正文，则会返回black（默认样式表）。

  

对于非继承属性，当没有为元素指定值时，对任何元素使用初始值。

这就是HTML或任何没有父级的标签会发生的情况，他们可以从中继承已经重置的值。

initial是默认样式表的默认值：请参阅了解https://www.w3.org/TR/CSS2/sample.html。

它的写作或描述方式确实不明确，在我的理解中都有不同词语的相同含义

一个可以混淆但也有助于理解/测试这个值的例子：

p {font-size:initial}和p {font-size:1rem}可能不一样，

如果你html{font-size:2em}。

@English读者，请不要犹豫，纠正我的平均写作

Answer 3

无。如果明确指定initial作为属性的指定值，则为其分配的任何元素的属性的计算值是该属性的初始值，无论它是否是继承属性。

例如，font-style的计算值，当其指定值为initial时，即使其父字体样式是其他内容，也是normal，尽管字体 - style是一个继承的属性。见https://jsfiddle.net/s3dzh6kw/

当级联没有为元素指定属性的指定值时，然后属性的指定值取决于属性是否被继承。