欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

CSS继承详解：理解、默认值、禁用与还原规则

最编程 2024-07-27 10:04:12
...

继承发生在现实生活中。孩子们继承了他们父母的特征：高大的父母可能会有高大的孩子，反之亦然。孩子们也会继承他们父母的财富和财产。

软件开发中的继承也是如此。在OOP语言中，类继承其父类的属性和方法。这样做是为了避免重复的代码。

那么，在网络设计语言--CSS中呢？继承也发生在那里。如果你在父元素中设置了一个属性，那么子元素就会默认继承这些属性和它们的值，而不需要明确地定义该属性。一个属性如color ，会传递给一个元素的子代。如果一个元素是绿色的，它的所有子元素都会变成绿色。

在本教程中，我们将重点讨论CSS中的继承。我们将演示继承在CSS中是如何工作的，并回顾一些你可以用来将可继承的属性传递给子元素的CSS属性。

什么是CSS的继承性？

CSS规则集从父选择器到子选择器在CSS层次结构中层层递减。这些CSS规则集是从它们的父选择器中继承来的。

如果没有指定CSS属性，子元素将自然地从父元素那里继承一个带有其值的CSS属性。

<style>
  #div1 {
    color: red;
  }
</style>

<div id="div1">
  Parent Div
  <div id="div1Child">Child Div 1</div>
  <div id="div2Child">Child Div 2</div>
</div>

输出结果看起来是这样的。

CSS Inheritance Example

我们只设置了div#div1 的文本颜色为红色，然而该CSS规则却被应用于它的两个子元素div：div#div1Child 和div#div2Child 。这两个子div 元素没有设置color: red 的CSS规则集。

发生了什么？子元素div从它们的父元素div#div1 继承了color: red 。color: red 没有在子元素div上指定，所以它们从它们的父元素div#div1 继承了它。

这种继承一直持续到最接近的父元素。

<style>
  #div1 {
    color: red;
  }

  #div1Child {
    color: green;
  }
</style>
<div id="div1">
  Parent Div
  <div id="div1Child">
    Child Div 1
    <div id="div1ChildChild">Child Child Div 1</div>
  </div>
  <div id="div2Child">Child Div 2</div>
</div>

CSS Inheritance Example

我们有div#div1ChildChild ，在div#div1Child 。现在，我们在div1Child 上设置了color: blue 。div1Child 不会从div1 继承color: red ；它将使用其color: blue 。这就是所谓的特殊性。div#div1ChildChild 将从div#div1Child 继承蓝色，因为它是它的父元素。

哪些CSS属性是继承的？

虽然不是所有的CSS规则/属性都是继承的，但所有的font-* 属性都是继承的。这包括。

  • font-size
  • font-family
  • font-weight

color 属性也是继承的。

在CSS中，当一个可继承的属性没有被设置在一个元素上时，就会发生继承。它在它的父链中往上走，将属性值设置为它的父值。

height 、width 、border 、margin 、padding 等CSS属性是不继承的。 We can enable inheritance on noninheritable CSS properties by using the `inherit` value.

什么是CSSinherit?

当你在一个CSS属性上设置inherit ，该属性就会从元素的父辈那里取值。

这不仅适用于可继承的属性，也适用于所有的CSS属性。

比方说，我们有以下的情况。

<style>
  #div1 {
    height: 100px;
    color: red;
  }

  #div1Child {
    height: inherit;
  }
</style>

<div id="div1">
  Parent Div
  <div id="div1Child">Child Div 1</div>
  <div id="div2Child">Child Div 2</div>
</div>

div1 的高度设置为100px ，颜色设置为red 。color 将被子元素继承。height 属性是不可继承的，所以子元素不会继承它。

div1Child ，另一方面，它的高度属性被设置为inherit 。这将使它从它的父元素div1 继承它的高度值。因此，div1Child 的高度将是100px 。

inherit 的值可以继承所有的CSS属性。使用inherit ，指定的元素将从它的父元素中获取指定属性的值。

如果CSS属性是由元素的父元素设置的，那么只有直接的子元素可以使用inherit 值从其父元素继承CSS属性。这是为了确保要继承的CSS属性是一个可继承的属性。

这里有一个例子。

<style>
  #div1 {
    color: red;
    height: 100px;
  }

  #div1ChildChild {
    height: inherit;
  }
</style>

<div id="div1">
  Parent Div
  <div id="div1Child">
    Child Div 1
    <div id="div1ChildChild">Child Child Div 1</div>
  </div>
  <div id="div2Child">Child Div 2</div>
</div>

div1 的高度设置为100px 。div1ChildChild 。div1 的一个孙子（div1 的一个子元素，但不是一个直接的子元素）的高度属性被设置为inherit 。CSS将尝试从div1ChildChild's parent (div1Child)那里获得这个值，但是它没有设置height 属性。所以，CSS将诉诸于它的初始值。

CSS不会沿着div1ChildChild 父辈的链条（祖辈、曾祖辈、曾曾祖辈等）去检查是否有任何一个A有height 属性设置为div1ChildChild 从。
所以div1ChildChild 不会有100px 的高度；相反，它将求助于浏览器计算的高度。

initial

根据MDN。

初始设置应用于所选元素的属性值，与浏览器默认样式表中为该元素设置的属性值相同。如果浏览器的默认样式表没有设置任何值，并且该属性是自然继承的，那么该属性值就被设置为继承。

initial 是一个CSS属性值，用于设置一个元素的CSS属性的初始值。这将成为该CSS属性的默认值。每个CSS属性都有一个默认值，用于在没有明确分配给它的值时。

例如，display CSS属性的初始值是inline 。还有一种叫做用户代理浏览器样式的东西，是浏览器为HTML元素提供的样式。这些与CSS属性的初始值没有关系。

一个div ，就有一个display 属性被设置为block 。这来自于浏览器的样式。将display 属性设置为initial ，div 元素将转化为inline 元素。

下面是一个没有initial 的例子。

<html>
  <style>
    .div {
      padding: 50px;
      background-color: orange;
    }
  </style>
  <body>
    <div class="div">Hello</div>
  </body>
</html>

div.div 元素是一个块状元素。现在，让我们把div.div 元素的display 属性设置为initial 。

下面是一个带有initial 的例子。

<html>
  <style>
    .div {
      padding: 50px;
      background-color: orange;
      display: initial;
    }
  </style>
  <body>
    <div class="div">Hello</div>
  </body>
</html>

CSSdisplay 被设置在div.div 元素上，其值为initial 。这使得div.div 元素采用了display 属性的初始值，即inline 。因此，div.div 成为一个内联元素。

color CSS属性的initial 值是黑色的。如果没有指定color 属性，元素文本节点的颜色就会变成黑色。

下面是一个使用color 值的例子。

<html>
  <style>
    .div {
      padding: 50px;
      background-color: orange;
      color: green;
    }
  </style>
  <body>
    <div class="div">Hello</div>
  </body>
</html>

div.div 元素的color 属性值被设置为green ，所以文本颜色将是绿色。

下面是一个带有color:``initial 的例子。

<html>
  <style>
    .div {
      padding: 50px;
      background-color: orange;
      color: initial;
    }
  </style>
  <body>
    <div class="div">Hello</div>
  </body>
</html>

div.div 元素的color 属性被设置为initial ，所以color 属性将采取其默认值（黑色）。div.div 元素中的文本节点Hello 将是黑色的。

unset

unset 属性对CSS属性的继承性和非继承性都有作用。

继承的属性

这些是默认从父元素中计算出来的属性。继承的属性会影响元素的子代。大多数影响文本节点的CSS属性都是继承的属性，如color,font-size,font-family 等。

如果我们在html 元素上设置一个颜色为绿色，它就会层叠到html 元素的所有子元素上，所以整个页面的文本颜色都是绿色。

非继承的属性

这些是不从元素的父级继承或计算的属性。它的值是显式设置的，或者由它的初始值决定。大多数影响元素节点的CSS属性都是非继承的属性

unset 值对继承的和非继承的CSS属性的作用是不同的。当unset 值被设置在一个继承的属性上时，它会将该属性的值重置为其继承的值。unset 值将非继承的属性重置为其初始值。

下面是一个继承属性中的u``nset 的例子。

<html>
  <style>
    html {
      color: red;
    }
    div {
      color: green;
    }
    .div {
      margin-top: 8px;
      padding: 50px;
      background-color: orange;
      color: unset;
    }
  </style>
  <body>
    <div class="div">Hello</div>
  </body>
</html>

div 元素的color 属性被设置为green ，html 的color 属性被设置为red ，div.div 的color 属性被设置为unset 。颜色属性是一个继承的CSS属性，所以unset 会将div.div 的颜色重置为它的父元素（html ）的颜色，即红色。

div.div 元素本应是绿色的，但由于unset 的值，其颜色被取自其父本，html 。

我们看到，unset 对继承的属性起作用，就像inherit 关键字一样。我们可以直接将inherit 设置为div.div'的颜色属性，其效果与使用unset 一样。

下面是一个关于unset 对非继承属性的例子。

<html>
  <style>
    html {
      color: red;
    }
    div {
      background-color: orange;
    }
    .div {
      margin-top: 8px;
      padding: 50px;
      display: unset;
    }
  </style>
  <body>
    <div class="div">Hello</div>
  </body>
</html>

通常情况下，浏览器在加载页面时，会使用其页面样式。默认情况下，div'的display 属性被设置为block 。这不是display 属性的默认值，其默认值是inline 。

在上面的代码中，div.div 的display 属性被设置为unset 。这个div.div 本应是一个block 元素，但由于其display 属性中的unset 值，它被重置为inline 。

所以，unset 值对非继承属性的作用就像initial 值一样。

revert

我们已经讨论了CSS基本样式和浏览器用户代理样式。CSS基本样式是CSS属性的默认值。这些是属性的自然默认值。
浏览器用户代理样式是由浏览器设置的值。当一个页面加载时，浏览器对一些CSS属性有其样式。

例如，display 属性有一个CSS基础值，即inline 。这是它在CSS引擎中的自然值。现在，浏览器将display 属性的样式改为block 。

浏览器的风格只是它添加了自己的.css 文件，这些文件带有它的代码。revert 关键字，将CSS的默认值反转为浏览器的用户代理样式。

这里有一个例子。

<html>
  <style>
    html {
      color: red;
    }
    div {
      background-color: orange;
      display: flex;
    }
    .div {
      margin-top: 8px;
      padding: 50px;
      display: revert;
    }
  </style>
  <body>
    <div class="div">Hello</div>
  </body>
</html>

这里，div 元素被设置为display: flex 。注意，display'的浏览器用户代理值是block 。div.div'的display 属性被设置为revert 。这将重置div.div 元素的display 属性为block 。div.div 将成为一个block 元素。

总结

在本教程中，我们了解了所有关于CSS继承的知识，并探讨了CSS中可以用来切换继承的四个主要关键字。

The postCSS inheritance: inherit, initial, unset, and revertappeared first onLogRocket Blog.

上一篇： 里氏替代原则

下一篇： 在C#中理解继承与多态的实战应用

推荐阅读