blocks|key|1647380|text|初值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1647381|属性的初始值是分配给W3C规范定义中的属性的值。|1647382|例如：|1647383|​|1647384|📷|atomic|offset|length|1647385|1647386|如果作者或浏览器不定义此属性，则CSS将引用初始值。|1647387|继承属性|1647388|对于继承的属性，只有当没有为元素指定值时，才会对根元素使用初始值。|blockquote|1647389|一些CSS属性可以继承它们的值。其他人不能。此行为也是在属性定义中建立的(请参阅上面图像中的继承)。|1647390|如果属性可以继承，这意味着在未指定值的情况下，该属性将从父属性获取该属性的计算值。|1647391|因为当未指定属性时，可以继承的属性总是向父属性查找值，因此除了根元素之外，不需要该属性的初始值出现在文档的任何地方。|style|BOLD|1647392|文档中任何位置的可继承属性，无论嵌套程度有多深，都会一直查找一个级别的值，直到到达根元素为止。这就是为什么初始值只需要存在于根元素上。|1647393|非遗传性质|1647394|对于非继承属性，对于任何元素，如果没有为元素指定值，则使用初始值。|1647395|不继承的属性将不会向其父属性寻求指导。因此，当未指定初始值时，将在所有情况下应用初始值。|1647396|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/212b3c6e59cf99086ae41620d012416c.png|imageAlt^0|0|0|0|0|0|1|0|0|0|0|0|0|0|0|V|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1M|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1N|8|@]|9|@$K|1O|L|1P|1|1Q]]|A|$]]|$1|M|3|G|5|6|7|1R|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1S|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1T|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1U|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1V|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1W|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1X|8|@$K|1Y|L|1Z|10|11]]|9|@]|A|$]]|$1|12|3|13|5|6|7|20|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|21|8|@]|9|@]|A|$]]|$1|16|3|17|5|T|7|22|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|23|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|24|8|@]|9|@]|A|$]]]|1B|$1C|$5|1D|1E|1F|A|$1G|1H|1I|-4]]]]

<h2>Initial Value</h2>

The initial value of a property is the value assigned to the property in the W3C specification definition.

For example:

<a href="https://i.stack.imgur.com/HgEwn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HgEwn.png" alt="enter image description here"></a>

If the author or browser do not define this property, then CSS will refer to the initial value.

<hr>

<h2>Inherited Properties</h2>

<blockquote>
 For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.
</blockquote>

Some CSS properties can inherit their value. Others can not. This behavior is also established in the property definition (see Inherited in image above).

If a property can inherit, that means the property will &ndash; in cases where the value has not been specified &ndash; take the computed value of that property from the parent.

Because a property that can inherit will always look to the parent for a value when it is not specified, there is no need for the initial value of the property to appear anywhere in the document, except on the root element.

An inheritable property anywhere in the document, no matter how deeply nested, will keep looking up one level for a value, until it reaches the root element. That's why an initial value only needs to exist on the root element.

<hr>

<h2>Non-Inherited Properties</h2>

<blockquote>
 For non-inherited properties the initial value is used, for any element, when no value is specified for the element.
</blockquote>

Properties that don't inherit will not look to their parent for guidance. Hence, the initial value is applied in all cases when it is not specified.

blocks|key|1647445|text|我试着用我的普通英语说一小句：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1647446|对于继承的属性，只有当没有为元素指定值时，才会对根元素使用初始值。|blockquote|1647447|按照我的理解，适用于HTML的任何规则的initial都是HTML的默认值，并且将由子程序继承，除非在HTML树的任何级别重置。|offset|length|style|CODE|1647448|每个浏览器使用几乎相同的默认样式表(html背景是透明的(从浏览器窗口看是白色的)，颜色是黑色的，h1是一个具有垂直边距的块，等等。|1647449|如果将color:green设置为HTML，将color:initial设置为body，则将返回到black+(默认样式表)。|1647450|对于非继承属性，对于任何元素，如果没有为元素指定值，则使用初始值。|1647451|这就是HTML或没有父标记的任何标记所发生的情况，它们可以从这些标记继承已重置的值。|1647452|initial是默认样式表的默认值:请参阅了解https://www.w3.org/TR/CSS2/sample.html。|1647453|它的书写或描述的方式确实不清楚，在我的理解中，两者都有着相同的含义和不同的词语。|1647454|一个可以混淆但也有助于理解/测试此值的示例：|1647455|p+{font-size:initial}和p+{font-size:1rem}可能不一样，|1647456|如果你做了html{font-size:2em}。|1647457|@英语读者，不要犹豫，纠正我的一般写作|1647458|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/TR/CSS2/sample.html^0|0|0|K|7|0|0|3|B|N|D|1D|5|0|0|0|0|7|N|12|0|0|0|0|0|L|M|I|0|5|J|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1D|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|1E|8|@$G|1F|H|1G|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|1H|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1I|8|@$G|1J|H|1K|I|J]|$G|1L|H|1M|I|J]|$G|1N|H|1O|I|J]]|9|@]|A|$]]|$1|O|3|P|5|D|7|1P|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1R|8|@$G|1S|H|1T|I|J]]|9|@$G|1U|H|1V|1|1W]]|A|$]]|$1|U|3|V|5|6|7|1X|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1Z|8|@$G|20|H|21|I|J]|$G|22|H|23|I|J]]|9|@]|A|$]]|$1|10|3|11|5|6|7|24|8|@$G|25|H|26|I|J]]|9|@]|A|$]]|$1|12|3|13|5|6|7|27|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|28|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]]]

I'll try to clear this a litlle with my average english:

<blockquote>
 For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.
</blockquote>

In the way i understand this, is that <code>initial</code> for any rules applied to HTML, are the default value for HTML and that will be inherited by children, unless reset at any level of your HTML tree .

Each browsers uses almost the same default style sheet (html background is transparent(white from the browser window), color is black, h1 is a block with vertical margins and so on ...)

If you set <code>color:green</code> to HTML and set <code>color:initial</code> to body, you will be back to <code>black</code> (the default style sheet).

<blockquote>
 For non-inherited properties the initial value is used, for any element, when no value is specified for the element.
</blockquote>

That's what happens to HTML or any tags with no parent from which they can inherit a value that has been reset .

<code>initial</code> are the default value of the default style sheet: see for some understanding <a href="https://www.w3.org/TR/CSS2/sample.html" rel="nofollow noreferrer">https://www.w3.org/TR/CSS2/sample.html</a> .

The way it is written or describe is indeed not clear, both have in my understanding the same meaning with different words 

<hr>

one example that can confuse but also help to understang/test this value :

<code>p {font-size:initial}</code> and <code>p {font-size:1rem}</code> might not be the same,

if you did <code>html{font-size:2em}</code> .

<hr>

@English readers, do not hesitate to correct my average writing

blocks|key|584392|text|没什么。如果显式地将initial赋值为属性的指定值，则该属性的计算值为该属性的初始值，无论该属性是否继承属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|584393|例如，font-style的计算值(当其指定值为initial+)是normal，即使其父字体样式是其他类型的，尽管字体样式是继承的属性。请参阅https://jsfiddle.net/s3dzh6kw/|584394|当级联没有为元素分配属性的指定值时，则属性的指定值取决于是否继承该属性。|584395|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/s3dzh6kw/^0|A|7|0|3|A|O|7|Y|6|20|U|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

Nothing. If you explicitly assign <code>initial</code> as the specified value of a property, then the computed value of the property for any element to which it is assigned is the initial value of that property regardless of whether it is an inherited property or not. 

For example, the computed value of <code>font-style</code>, when its specified value is <code>initial</code>, is <code>normal</code> even if its parent font-style is something else, despite the fact that font-style is an inherited property. See <a href="https://jsfiddle.net/s3dzh6kw/" rel="nofollow noreferrer">https://jsfiddle.net/s3dzh6kw/</a>

When the cascade does not assign a specified value of a property for an element, then the specified value of the property depends on whether the property is inherited or not.

I'm currently learning how to use the <code>initial</code> value in CSS.

However, I am very confused by the definitions given in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value" rel="nofollow noreferrer">MDN</a> for inherited property and non-inherited properties. 

So what exact is the effect of <code>initial</code> on both inherited and non-inherited properties? What are the difference between them?

<a href="https://i.stack.imgur.com/4gRM4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4gRM4.png" alt="enter image description here"></a>

Understanding how initial values work with inherited and non-inherited properties

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我目前正在学习如何在CSS中使用initial值。但是，我对中给出的继承属性和非继承属性的定义感到非常困惑。那么，initial对继承和非继承属性的确切影响是什么？他们之间有什么区别？​​

问了解初始值如何处理继承和非继承属性。
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问了解初始值如何处理继承和非继承属性。EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问了解初始值如何处理继承和非继承属性。
EN