• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • css 继承

    在css中,每个CSS 属性定义的概述都指出了这个属性是默认继承的("Inherited: Yes")还是默认不继承的("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

    继承属性

    当元素的一个继承属性(inherited property没有指定值时,则取父元素的同属性的计算值 computed value。只有文档根元素取该属性的概述中给定的初始值(initial value)(这里的意思应该是在该属性本身的定义中的默认值)。

    继承属性的一个典型例子就是color属性。给出以下样式规则:

    p { color: green; }

    若将其应用在下面这段 HTML 代码上…

    <p>This paragraph has <em>emphasized text</em> in it.</p>

    …文本"emphasized text"就会呈现为绿色,因为em元素继承了p元素color属性的值,而没有获取color属性的初始值(这个color值用于页面没有指定color时的根元素)。

    非继承属性

    当元素的一个非继承属性(在Mozilla code 里有时称之为reset property)没有指定值时,则取属性的初始值 initial value(该值在该属性的概述里被指定)。

    非继承属性的一个典型例子就是border属性。给出以下样式规则:

     p { border: medium solid; }

    若将其应用在下面这段 HTML 代码上…

      <p>This paragraph has <em>emphasized text</em> in it.</p>

    …文本"emphasized text"就没有边框,因为border-style属性的初始值为none

    inherit关键字允许显式的声明继承性,它对继承和非继承属性都生效。

    可以使用all简写属性一次控制所有属性的继承,该属性将其值应用于所有属性,例如:

    font {
      all: revert;
      font-size: 200%;
      font-weight: bold;
    }

    这会将font属性的样式恢复为用户代理(浏览器)的默认值,除非存在用户样式表,在这种情况下使用该样式表。然后它将字体大小加倍并应用font-weight属性为"bold"

    注意

    inherit关键字允许显式的声明继承性,它对继承和非继承属性都生效。

    可以使用all简写属性一次控制所有属性的继承,该属性将其值应用于所有属性,例如:

    font {
      all: revert;
      font-size: 200%;
      font-weight: bold;
    }

    这会将font属性的样式恢复为用户代理(浏览器)的默认值,除非存在用户样式表,在这种情况下使用该样式表。然后它将字体大小加倍并应用font-weight属性为"bold"

    上篇:css 语法

    下篇:css 优先级