CSS继承如何表现？ [复制]

Question

我在MDN lesson看到了一个关于继承的例子，我不明白为什么第三个链接的颜色是黑色的？它应该是蓝色的，就像通常的链接一样，因为初始值应该是默认值！

谢谢你帮助我。

代码如下：

body {
  color: green;
}

.my-class-1 a {
  color: inherit;
}

.my-class-2 a {
  color: initial;
}

.my-class-3 a {
  color: unset;
}

<ul>
  <li>Default <a href="#">link</a> color</li>
  <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
  <li class="my-class-2">Reset the <a href="#">link</a> color</li>
  <li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>

Answer 1

这是因为属性的初始颜色是黑色的，与

相同

这是 w3schools 的一个示例，他们将分区的颜色设置为红色，但使用初始重置 h1 为属性的基本颜色。

div {
    color: red;
}

#initialH1Color {
    color: initial;
}

<div>
<h1 id="initialH1Color">this will be initial color</h1>
<h1>this will be div color: red</h1>
</div>

---

这里是继承的例子

---

div{
  background: #333;
  border: 5px solid orange;
  color: lime;
}

.initial {
  color: initial;
}

.inherit {
  color: inherit;
}

<div>
  <h1 class="initial">class initial</h1>
  <h1 class="inherit">class inherit</h1>
  <h1>no class</h1>
</div>

正如你在这里看到的类继承和没有类是相同的颜色，那是因为继承是颜色的自动/正常/基本/初始值

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

更新

a 属性默认为蓝色的原因（不是，它是黑色）。是因为它是一个链接。看例子

<a>no href tag = black</a>
<a href="#">has href tag = blue</a>
<a href="#" >same with this one</a>