Question

inherit如何在这里工作？

具体来说，我需要从w3schools了解这个README：

<!DOCTYPE html>
<html>
<head>
<style>
span {
    color: blue;
    border: 1px solid black;
}
.extra span {
    color: inherit;
}
</style>
</head>
<body>

<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>

<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from     its parent.
</div>

<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set     to be.
</div>

</body>
</html>

inherit如何在此代码中运行？我需要明确的答案。

Answer 1

让我们分解示例代码。

<style>
span {
    color: blue;
    border: 1px solid black;
}
.extra span {
    color: inherit;
}
</style>

所以，第一个span块表示“默认情况下将所有跨度元素颜色变为蓝色，并为它们提供1px纯黑色边框”。

.extra span块是比span块更具体的规则，描述特定元素的最具体的块将优先于特定于较少的块。但是，此HTML页面中的任何span标记将首先应用最常规的块（span {}），然后按照特定顺序在链中的每个前一个块之上应用其他匹配块。因此，类<span>元素中包含的extra标记将首先应用color: blue和border: 1px solid black。应用第一个span {}块后，将应用.extra span {}块。由于.extra span没有说明边框，因此将使用span {}块的边框。这是“级联样式表”中“层叠”部分来自的很大一部分。

现在，有了基础知识，inherit做了什么？正如W3Schools所说：

inherit关键字指定属性应从其父元素继承其值。

让我们再看一遍HTML：

<div class="extra" style="color:green">
    Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>

在这种情况下，父元素是<div>，具有类extra。 <span>内的<div>标记最具体地匹配.extra span {}，它指示从其父元素继承它的颜色属性，在这种情况下，是<div class="extra">，其内联样式为color: green。因此，文本显示为绿色，因为<div>的颜色为绿色。

重要的是不要混淆并认为inherit从链上的其他CSS规则继承（如span {}）：不，它继承自其父元素的属性{{1 }}！

修改

我还发现了一篇博文，更全面地介绍了这一点，包括，正如@steveax在下面的评论中提到的，默认情况下<div>是如何继承的，可能是一个不好的例子。但是，正如本博文中所提到的，大多数浏览器使用默认样式表将链接颜色设置为蓝色，在这种情况下，color属性可以覆盖此属性，从而导致链接颜色与父元素相同。我们可以通过修改我们的原始示例来看到这一点（您可以在TryIt编辑器中执行此操作并亲自查看）：

让我们添加一个新的CSS块：

color: inherit

现在让我们更改我们的.extra a { color: inherit; }以包含一个链接：

<div class="extra">

如您所见，链接现在是绿色而不是蓝色。如果我们删除<div class="extra" style="color:green"> Here is <span>a span element</span> which is green, because it inherits from its parent. Here is <a href="#">A Link</a>. </div>块，则链接变为蓝色。

Answer 2

http://www.w3schools.com/cssref/css_inherit.asp

它从其父级获取其CSS属性。例如

#1{
     color :red;
}

#2{
     color : inherit;
}

使用以下HTML：

<div id="1">
     Hello!
     <div id="2">
          I am another div!
     </div>
</div>

将导致id为2的div与其父对象具有相同的颜色，在本例中为div 1.因此，颜色将为红色。

在css中“继承”是什么意思？

2 个答案: