取消继承css_了解CSS继承（继承，初始，取消设置和还原）

最新推荐文章于 2022-10-14 10:54:56 发布

daique1908

最新推荐文章于 2022-10-14 10:54:56 发布

阅读量4.2k

点赞数 3

文章标签： css java python html 编程语言

取消继承css

HTML中存在关系，而这些关系使我们可以选择和设置网页元素的样式。当一个HTML元素嵌套在另一个元素中时，外部元素称为父元素，而内部元素是child元素。

<div>
    <h>Heading</h>
    <span>I am a span</span>
    <p>This is a paragraph</p>
</div>

子元素本身可以成为另一个元素的父元素。

为什么所有这些序言和背景故事？因为很重要！

在为父元素设置样式时，在某些情况下，样式将由其子元素继承。我说一些情况是因为这种继承并不总是成立。

CSS继承的重要性

如果您曾经设置过网页内容的样式，则很有可能没有为每个必须显示文本的元素编写字体样式。您可能仅将字体样式添加到了body元素，例如：

<body>
    <div>
    <h2>A h2 element</h2>
    <p>A paragraph</p>
    <div>
      <p>Another paragraph</p>  
    </div>
  </div>
  <div>
    <h3>A h3 element</h3>
  </div>
</body>

如果您想为所有这些内容提供统一的字体样式，则只需设置body元素的样式即可：

body {
  font-family: Arial, Helvetica, sans-serif;
}

这是可能的，因为跨HTML元素的继承。这很有用，因为我们不必为div和标题重复相同的font样式。同样适用于color样式，除非将不同的color样式应用于子元素，否则将其应用于父元素时将应用于该父元素的子元素。

虽然继承使我们很轻松，但是如果所有CSS属性都以这种方式运行，事情就不会那么容易了。

这是另一个示例：

<ul class="main-list">
  <li>Dairy</li>
  <li>Vegetable</li>
  <li class="sub-list">
    Fruit
    <ul>
      <li>
        Drupe
        <ul>
          <li>Peach</li>
          <li>Coconut</li>
          <li>Olive
        </ul>
      </li>
      <li>
        Berry
        <ul>
          <li>Tomato</li>
          <li>Cucumber</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

谁知道Cucumber是浆果？我们将对父级列表实现一些样式，并查看沿线继承的内容：

应用于无序列表的font和color样式由其子元素甚至其子元素继承。但是， border样式不是这种情况。

那么还有哪些其他属性可以继承？

继承属性的完整列表

根据W3C，这是可以继承的属性。

azimuth
border-collapse
border-spacing
caption-side
color
cursor
direction
elevation
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
pitch-range
pitch
quotes
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
text-align
text-indent
text-transform
visibility
voice-family
volume
white-space
widows
word-spacing

您可以在W3C的网站上找到有关此列表的更多信息（您绝对不需要记住所有这些信息！）。

如何强制属性继承

由于某些属性无法继承，因此您可能会认为解决办法是也将它们应用于子元素。我们上面使用的样式可能如下所示：

.main-list {
  border: 1rem solid #000;
  color: red;
  font-family: Verdana
}

.sub-list {
  border: 1rem solid #000;
}

我们仍然在父级列表和第一个子列表上只有边框样式。但是问题是我们不得不重复自己。一遍又一遍地复制相同样式的痛苦变得显而易见。

一个好的解决方案是只需要对样式应用一次，最好是对父样式应用一次，并对子项进行一些调整以继承。这样可以使所有物品保持干燥和清洁。

继承关键字

根据MDN文件：

“ Inherit CSS关键字使指定的元素从其父元素获取属性的计算属性。” – MDN

换句话说，这是一种声明应从元素的父级获取特定属性值的方式。此关键字可以在任何 CSS属性上使用。

回到我们的示例，这是样式的显示方式：

.main-list {
  border: 1rem solid #000;
  color: red;
  font-family: Verdana;
}

.sub-list {
  border: inherit;
}

这样，结果将如下所示：

因此，如果需要更改边框样式，我们只需要在一个地方进行更改即可。

如何强制不继承属性

尽管可以对默认情况下不可继承的属性强制执行继承，但在某些情况下，最好不要这样做。另一种选择是利用属性的初始值。

初始关键字

您可以使用initial CSS关键字设置CSS属性的默认值或初始值。这将导致该属性的继承值回到其初始值。

在此示例中，发生了几件事。我们有两个div元素，其红色属性由嵌套在其中的h1和p元素继承。但是，我们还应用了全局h1样式（蓝色），但是我们确保第二个h1不会以以下方式继承这两种样式：

h1 {
  color: blue;
}

div {
  border: 1rem solid #000;
  color: red;
  font-family: Verdana;
  margin-bottom: 10px;
}

.berries h1 {
  color: initial;
}

我们在.berries块中的h1返回到浏览器最初应用的任何颜色。看起来像这样：

其他CSS继承关键字

除了inherit和initial关键字之外，我们还可以使用revert和unset 。实际上，实际上建议使用这些替代方法，因为initial会产生一些意外的结果。

未设定的关键字

unset关键字稍有不同。它将元素的值重置为继承的值（如果已继承），如果没有则重置为其初始值。再次是我们的示例：

h1 {
  color: blue;
}

div {
  border: 1rem solid #000;
  color: red;
  font-family: Verdana;
  margin-bottom: 10px;
}

.berries h1 {
  color: unset;
}

在这种情况下，第二个h1的color属性将恢复为其继承的值（红色），而不是其初始值（黑色）：

还原关键字

最后，我们有revert关键字，在大多数情况下，它的作用与unset相似。它将属性重置为其继承的值（如果它是从其父项继承的），或者重置为由用户自己的样式表（如果存在）建立的默认值，或者重置为浏览器的样式。

结论

当在样式表中声明样式规则时，会有很多地方可以使用该属性的值。

从哪里获取样式取决于属性在继承方面的工作方式。如果该属性是可继承的，则其值将来自其父对象，该父对象将在网络作者创建的样式表中声明。否则它将来自第二或第三来源。

CSS中的继承可能会有些混乱！希望本教程对您有所帮助。

翻译自: https://webdesign.tutsplus.com/tutorials/understanding-css-inheritance-inherit-initial-unset-and-revert-keywords--cms-34233

取消继承css

daique1908

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
取消继承css_了解CSS继承（继承，初始，取消设置和还原）

HTML中存在关系，这些关系使我们可以选择和设置网页元素的样式。当一个HTML元素嵌套在另一个元素中时，外部元素称为父元素，而内部元素是child元素。 <div> <h>Heading</h> <span>I am a span</span> <p>This is a paragraph&lt...
复制链接

扫一扫