css - CSS 继承如何表现？

Question

这个问题在这里已经有了答案:





What is use of 'initial' value in CSS?

(2 个回答)



What's default HTML/CSS link color?

(12 个回答)


去年关闭。




我在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>

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

The inherit keyword specifies that a property should inherit its value from its parent element.

更新

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

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