【问题标题】:Understanding how initial values work with inherited and non-inherited properties了解初始值如何与继承和非继承属性一起使用
【发布时间】:2017-06-18 23:17:46
【问题描述】:

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

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

那么initial 对继承和非继承属性的确切影响是什么?它们有什么区别?

【问题讨论】:

    标签: css inheritance language-lawyer specifications cascade


    【解决方案1】:

    初始值

    属性的初始值是在 W3C 规范定义中赋予该属性的值。

    例如:

    如果作者或浏览器没有定义这个属性,那么 CSS 将引用初始值。


    继承的属性

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

    一些 CSS 属性可以继承它们的值。别人不能。此行为也在属性定义中建立(参见上图中的继承)。

    如果一个属性可以继承,这意味着该属性将(在未指定值的情况下)从父级获取该属性的计算值。

    因为可以继承的属性在未指定时总是会向父级查找值,因此该属性的初始值不需要出现在文档中的任何位置,除了 根元素

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


    非继承属性

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

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

    【讨论】:

    • 解释得很漂亮!
    【解决方案2】:

    我会尽量用我的平均英语来解决这个问题:

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

    按照我的理解,initial 适用于 HTML 的任何规则都是 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 读者,请不要犹豫,纠正我的平均写作

    【讨论】:

      【解决方案3】:

      什么都没有。如果您将initial 显式分配为属性的指定值,则分配给它的任何元素的属性计算值都是该属性的初始值,无论它是否是继承属性。

      例如,font-style 的计算值,当其指定值为 initial 时,即使它的父 font-style 是其他东西,尽管 font-style 是一个继承属性,但它的计算值是 normal。见https://jsfiddle.net/s3dzh6kw/

      当级联没有为一个元素分配一个属性的指定值时,那么该属性的指定值取决于该属性是否被继承。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2017-12-18
        • 1970-01-01
        • 1970-01-01
        • 2013-01-11
        • 2010-10-05
        • 2014-02-03
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多